>在本文中，您将学习如何在不降低浏览器性能的情况下对CSS框阴影进行动画。
在CSS中，Box-Shadow属性用于将阴影添加到Web元素中，这些阴影可以是动画的。但是，影子动画会影响浏览器的性能，从而在渲染页面时会滞后。
本指南旨在针对具有HTML的工作知识和CSS动画的前端开发人员。
钥匙要点参见笔
通过sitepoint（@sitepoint）的带有阴影动画的Web元素 在Codepen上。
由于幕后发生的事情，CSS弹幕动画可能会很重。在Box Shadow Animation（或任何形式的动画）中触发了三个主要过程或事件。这些事件是绘画，布局和合成。
绘画。在绘画中，浏览器充满了颜色的像素，而Box-Shadow是触发此事件的CSS属性之一。基本上，它在动画的每个帧中都会创建一个新的阴影。根据Mozilla的说法，理想的CSS动画应在60fps。
>
简单地说，如果动画属性影响其他元素，它将改变页面的布局，导致重新计算 - 使用大量系统资源。
在此示例中，选择了油漆闪烁。每次有绘画事件时，屏幕都会闪烁绿色：
> navbar：
文本卡：
导航链接：
>
请注意，涂料闪烁可能在Codepen演示中不起作用，因此您需要使用文本编辑器的实时预览尝试一下。下面的视频显示了您应该看到的内容。
目标是最大程度地减少绘画和布局的变化，因为它们使用了更多的系统资源。
检查性能>
让我们创建一个简单的盒子阴影动画，从一些html开始：
<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>; </span>
这是结果：
<span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span> </span><span><span><span></body</span>></span> </span>
>
参见笔
<span><span>.box</span> {
</span> <span>box-shadow: 0px 5px 10px 0px <span>rgba(0, 0, 0, 0.5)</span>;
</span> <span>transition: transform ease 0.5s, box-shadow ease 0.5s;
</span><span>}
</span><span><span>.box:hover</span> {
</span> <span>transform: translateY(-5px);
</span> <span>box-shadow: 0px 10px 20px 2px <span>rgba(0, 0, 0, 0.25)</span>;
</span><span>}
</span>在Codepen上。
对于动画，我们正在更改Y偏移，模糊和传播的值。我们也将带有更透明的最终阴影。
>
下面的屏幕截图显示了您从Chrome的Devtools中找到的。>阴影的动画周期悬停在上下，在顶部突出显示，并且发生的过程分解在底部显示。分解表明，脚本需要7ms，渲染需要55毫秒，绘画持续30ms。
现在，这些数字看起来还可以，但是当CPU慢四倍时会发生什么？您可以从“性能”选项卡中防止CPU速度。
>以下图显示了使用较慢的CPU运行相同动画时会发生什么。
在这个新过程中，加载需要6ms。脚本最高为52毫秒，渲染已翻了一番，达到117ms，现在绘画为72毫秒。
>您还可以节流网络速度，并使CPU甚至更慢。影子动画使用了大量系统资源，我们将寻求消除一些负载。
>
如果您必须在网页上进行动画阴影，则值得使它们更具性能。在本节中，您将了解可以调整阴影动画的各种方式，以便降低性能。
我们将介绍以下内容：
在第一个动画中，只有阴影的不透明度在变化，而在第二个动画中，y offset从10px变为20px，差异从20px变为40px。
>在6倍放缓时他们的性能（因此您可以清楚地看到性能图），从动画开始，只有不透明度正在改变：<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>; </span>
>大约需要两秒钟才能悬停在盒子上和盒子上。现在将其与第二个影子动画进行比较。
再次开出两秒钟，所有事件的时间都有明显的增加。绘画之前是96毫秒，现在翻了一番，达到187毫秒。渲染是合成的一部分，也从97ms上升到178ms。 因此，仅更改阴影的不透明度会产生更具性能的动画。
这是这两个动画的现场演示。
参见笔
sitepoint（@sitepoint）的动画不透明度与动画偏移 在Codepen上。
>层状阴影
如果您观察到桌子周围的阴影或将物体提起上面，您会注意到其最黑暗的阴影区域最接近物体，并且随着它向外扩散时，它变得越来越轻。
一个盒子阴影，复制这种效果并不容易。分层阴影看起来好多了。即使增加了阴影层，它们也会产生更多的性能动画。
现在，让我们有一个带有两个盒子阴影层的阴影动画：
<span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span> </span><span><span><span></body</span>></span> </span>
差异很明显。分层阴影不仅会产生看起来更好的阴影效果，而且在动画时表现出色。渲染已从148ms降低到74ms，绘画也从133ms降至74ms。
这是两者的现场演示。>
参见笔
单个阴影与层面阴影动画按SitePoint（@SitePoint）
在Codepen上。
现在，让我们尝试一些不同的东西，在动画过程中添加第二个阴影：
<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>; </span>
>在动画过程中添加第二个阴影层的性能不如从一开始就拥有两层，但它的绘画仍然具有100毫秒的绘画，而单个盒子射击动画则是133毫秒，这是一个改进。
动画伪元素
这次，我们将在不更改盒子阴影属性的情况下复制影子动画。从以前的演示中，我们可以看到影子动画期间仍有很多重新粉刷。如果您要更改盒子阴影值，则无法避免此过程。
>因此，在盒子的基本样式之后，创建一个：伪元素之后并给它给它一个盒子阴影，这将是动画之后阴影的最终状态
现在，您要做的就是更改伪元素的不透明度：悬停：
>让我们在常规的影子动画旁边看一下。
<span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span> </span><span><span><span></body</span>></span> </span>
<span><span>.box</span> {
</span> <span>box-shadow: 0px 5px 10px 0px <span>rgba(0, 0, 0, 0.5)</span>;
</span> <span>transition: transform ease 0.5s, box-shadow ease 0.5s;
</span><span>}
</span><span><span>.box:hover</span> {
</span> <span>transform: translateY(-5px);
</span> <span>box-shadow: 0px 10px 20px 2px <span>rgba(0, 0, 0, 0.25)</span>;
</span><span>}
</span>参见笔
sitepoint（@sitepoint）在Codepen上。
>在此处视觉上没有太多要进行的。真正的区别在于他们的表现。常规盒子动画的结果如下所示。
>
>它具有230ms的渲染时间，绘画的211毫秒。现在是伪阴影动画。
使用变换属性
此属性可以与翻译或比例属性一起使用，以模拟将元素从页面上抬起，从而产生深度的幻觉。
一些有用的提示
首先，保持最小。为此，不要在每个元素上扔阴影。其次，仅动画交互式元素。无需动画任何没有功能的东西。这将减少CPU的工作量并大大提高性能。
结论阴影可以视觉上增强您的网站，但它们也会影响性能，尤其是在动画方面。在本文中，我们测试了有关动画阴影的各种方法，并比较了它们的性能。动画阴影触发了三个事件 - 绘画，布局更改和合成 - 首先是任务最多的事件。
>最后一个选项是动画不是盒子阴影，而是一个提供阴影的伪元素。这大大减少了重新粉刷的数量以及CPU在运行动画方面所做的整体工作。您将编写更多代码，但这是确保表现良好的最好的选择。
>相关内容：
> css：is，：where and：
>将元素隐藏在CSS
中的10种方法值代表：水平偏移：阴影的水平距离。
垂直偏移：阴影的垂直距离。
模糊半径：施加到阴影的模糊量： 选修的。
颜色：阴影的颜色。
>过度使用盒子阴影，尤其是具有较大的模糊值，可能会影响性能。建议明智地使用阴影来保持光滑的用户体验，尤其是在功能较低的设备上。
以上是如何使CSS框阴影动画并优化性能的详细内容。更多信息请关注PHP中文网其他相关文章！
