CSS如何对阴影动画优化，有什么方法-群英

上一篇：CSS中鼠标悬停出现旋转的效果的代码是什么下一篇：FrameLayout布局怎么使用，如何设置其子视图

在实际应用中，我们有时候会遇到“CSS如何对阴影动画优化，有什么方法”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“CSS如何对阴影动画优化，有什么方法”文章能帮助大家解决问题。

本技巧来自这篇文章 --How to animate box-shadow with silky smooth performance

本文不是直译，因为觉得这个技巧很有意思很有用，遂起一文。

box-shaodw在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子：

div {
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

希望 hover 的时候，盒阴影从box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)过渡到box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)-->box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

OK，最简单的方法当然是：

div:hover {
    width: 100px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

因为过渡动画是在两个不同的盒阴影状态在发生，所以在过渡动画的时间内，浏览器会不断的重绘盒阴影。而又由于阴影属于耗性能样式，所以这种动画给人的感觉多少有些卡顿。

这里有一个小技巧可以优化这种情况下的阴影动画。

使用伪元素及透明度进行优化

使用伪元素及透明度进行优化，我们给上述元素添加一个 before 伪元素，大小与父 div 一致，并且提前给这个元素添加好所需要的最终的盒阴影状态，但是元素的透明度为 0。

div {
    position: relative;
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
 
div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
}

然后，在 hover 的时候，我们只需要将伪元素的透明度从 0 设置为 1 即可。