黑马程序员技术交流社区
标题:
【广州前端】- css3伪类的使用技巧和运用（一）
[打印本页]
作者:
coral菜菜
时间:
2018-8-12 17:15
标题:
【广州前端】- css3伪类的使用技巧和运用（一）
本帖最后由 coral菜菜 于 2018-8-12 17:16 编辑
1、伪类实现盒子阴影
众所周知，Animate/transition box-shadow 可以使用
box-shadow属性
来实现盒子阴影效果，但repaint消耗较多，于是这里提出
通过修改伪元素的透明度来实现盒子阴影
实现原理：
通过改变透明度，这样从一个非默认值更新它的值，就不需要承担任何重绘
这里设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度，下面是传统和伪类实现的代码对比
<div class="before"> <h1>Before</h1> <p>Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多</p></div> <hr /><div class="after"> <h1>After</h1> <p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗</p></div>
.before { padding: 1em; background-color: #fff; -webkit-transition: 0.2s; transition: 0.2s;}.before:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);}.after { position: relative; padding: 1em; background-color: #fff;}.after:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); opacity: 0; will-change: opacity; -webkit-transition: 0.2s; transition: 0.2s;}.after:hover:before { opacity: 1;}
2、伪元素:before实现的面包屑导航栏
<ul class="breadcrumb"> <li><a href="#">Home</a> </li> <li><a href="#">Pictures</a> </li> <li><a href="#">Summer 15</a> </li> <li>Italy</li></ul>
ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee;}ul.breadcrumb li { display: inline;}ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0";}ul.breadcrumb li a { color: green;}
效果：
3、伪类after实现的三角箭头
实现原理：三边设置边框，箭头指向的那个方向的border不用设置，位于箭头两边的边框颜色为透明（transparent），对边为主体边框颜色（较大的）/主体背景颜色（较小的），因为我们要有边框颜色的三角箭头，当第一个箭头（较大的）被第二个箭头（较小的）通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了，其颜色就是较大的那个三角箭头的颜色，可调。而较小的那个三角箭头的颜色要设置成主体颜色，进行负值定位偏移时要把主体边框盖住，从而与主体合在一起了
<div class='container'> <img alt='' src='http://placehold.it/400x200'> <div class='arrow-left'></div></div><div class='container new'> <div class='arrow-right'></div> <img alt='' src='http://placehold.it/400x200'></div>
.arrow-left:before { z-index: 9999; content: ""; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid 0px;}
点击
查看更多精彩前端资源
点击有惊喜
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
点击查看更多精彩前端资源