使用css3伪元素制作时间轴并且实现鼠标选中高亮效果
css3 实现 效果 元素 制作 鼠标 选中 并且
2023-09-14 08:58:27 时间
利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类
1)::before 在元素之前添加内容。
2)::after 在元素之后添加内容。
提示:亦可写成 :before :after CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。
预览地址:http://www.yangqq.com/web/time.html
代码分析:右边那条黑色竖线,可以看成是右边框、也可以用伪元素after或者before实现,所以方法有很多,下面的只作为一种参考,或许你有更好的写法
使用方法:
p::before { content: " "; } /*在p元素前添加内容 */
html代码:
<div class="blogs">
<div class="bloglist">
<h2><a href="/" target="_blank">我希望我的爱情是这样的</a></h2>
<ul>
<a href="/"><img src="/web/24/images/s1.jpg"></a>
<p> 我希望我的爱情是这样的,相濡以沫,举案齐眉,平淡如水。我在岁月中找到他,依靠他,将一生交付给他。做他的妻子,他孩子的母亲,为他做饭,洗衣服,缝一颗掉了的纽扣。然后,我们一起在时光中变老。</p>
</ul>
</div>
</div>
主要CSS代码:
.blogs { width: 670px; margin: 20px auto; position: relative; }
.blogs::before { content: ""; width: 2px; height: 100%; top: 0; bottom: 0; right: 0; background: #000; position: absolute } /* 右侧的黑色竖轴线 */
.bloglist { background: #222; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); width: 630px; color: #b9b9b9; border-radius: 6px; }
.bloglist::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #111; position: absolute; left: 630px; top: 40px; }/* 三角形 */
.bloglist::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 662px; top: 36px; background: #000; border: 2px solid #333; z-index: 10; }/* 圆形 */
.bloglist:hover::after { border-color: #ccc; }/* 鼠标放上去 圆形边框变色 */
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- CSS3实现毛玻璃效果
- CSS3选择器大全[通俗易懂]
- 200行Html5+CSS3+JS代码实现动态圣诞树
- HTML5+CSS3常见布局方式
- 纯 CSS3 实现瀑布流效果
- HTML CSS3+JS实现【灵动岛】效果
- CSS3 圆角边框 阴影 浮动详解
- 【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )
- 【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
- CSS3文字描边 CSS3字体外部描边详解编程语言
- css3 line-height:0的作用详解编程语言
- css3图片大小自适应的方法(不采取拉伸)详解编程语言
- css3 用混合模式要注意的问题详解编程语言
- CSS3幸运大转盘最简单的写法详解编程语言
- css3中background-size中的cover与contain的区别详解编程语言
- CSS3 渐变效果
- CSS3 Flexbox
- CSS3实现3D文字动画效果