>在本文中，您將學習如何在不降低瀏覽器性能的情況下對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中文網其他相關文章！
