从青铜到王者,10个css3伪类使用技巧和运用

　　伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素,具体的伪类和伪元素相关知识本文就不深入,下面介绍一下从青铜到王者10个css3伪类使用技巧和运用。　　

　　青铜1,伪类实现盒子阴影　　

　　众所周知,动画/过渡不必可以使用　　　　来实现盒子阴影效果,但重画消耗较多,于是这里提出　　　　

　　* *通过改变透明度,这样从一个非默认值更新它的值,就不需要承担任何重绘　　

　　这里设置一个空的伪元素设置阴影透明度为0隐藏,再通过鼠标悬停恢复它的透明度、下面是传统和伪类实现的代码对比　　

　　<前> 　　& lt; div 类=癰efore"祝辞　　,,,& lt; h2> Before 　　,,,& lt; p>动画/transition box-shadow 可以使用不必属性来实现盒子阴影效果,但重绘消耗较多& lt;/p> 　　& lt;/div> 　　,& lt; hr /比; 　　& lt; div 类=癮fter"祝辞　　,,,& lt; h2>肝移植后迟发性肝;/h2> 　　,,,& lt; p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗& lt;/p> 　　& lt;/div> 　　之前　　<前> 　　.before { 　　,,,填充:,1 em; 　　background - color,,,,, # fff; 　　,,,-webkit-transition:, 0.2年代; 　　,,,的转变:,0.2年代; 　　} 　　.before: hover { 　　,,,不必:,0,0,10 px 0, rgba (0, 0, 0, 0.3); 　　} 　　.after { 　　,,,位置:,相对; 　　,,,填充:,1 em; 　　background - color,,,,, # fff; 　　} 　　后:before { 　　内容,,,:,“,“; 　　,,,位置:,绝对的,,, 　　,,,:,0; 　　,,,右:,0; 　　,,,底部:,0;,, 　　,,,左:,0; 　　,,,z - index:, 1; 　　,,,不必:,0,0,10 px 0, rgba (0, 0, 0, 0.3); 　　,,,不透明度:,0; 　　,,,将会改变:,不透明; 　　,,,-webkit-transition:, 0.2年代; 　　,,,的转变:,0.2年代; 　　} 　　后:徘徊:before { 　　,,,不透明度:,1; 　　} 　　之前　　　　