当我们制作带有box-shadow属性的动画时，每一帧动画都会导致浏览器重绘html阴影效果，严重影响页面的性能。 如何解决box-shadow属性动画时页面的性能问题？ 答案是不！ 并且我们还可以使用其他方法来模拟box-shadow动画：通过动画伪元素的opacity属性来实现动画元素阴影的效果。 通过这些方法，只需要少量的重绘就可以达到与动画box-shadow属性相同的效果。
使用box-shadow属性来制作元素的阴影动画效果。
动漫盒子-阴影属性
使用键盘刷卡看看效果
使用动画改变 box-shadow（本例中从 box-shadow:01px2pxrgba(0,0,0,0.15) 到 box-shadow:05px15pxrgba(0,0,0,0.3) 每帧都会执行所有重绘操作。
事实上，你在台式机笔记本浏览器上不会看到任何问题，而在联通手机上可能会出现问题。 事实上，在更复杂的布局中，你的桌面笔记本浏览器也会出现问题。
使用伪元素为元素上的阴影效果设置动画。
使用伪元素动画进行模拟
使用键盘刷卡看看效果
我们可以通过插入 :after 并为其添加阴影，然后在键盘滑动时为伪元素的不透明度属性设置动画来减少重绘次数。
变换和不透明度属性的更改是硬件加速的html阴影效果，因此我们可以获得更好的性能。
执行前面两个反例时，打开浏览器的开发者工具，可以看到类似下面的结果：
发表评论