如何在CSS中優(yōu)化陰影動畫

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在CSS中優(yōu)化陰影動畫，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是專業(yè)的立山網(wǎng)站建設(shè)公司，立山接單;提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行立山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

css的三種引入方式

1.行內(nèi)樣式，最直接最簡單的一種，直接對HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

box-shaodw在我們的工作中使用以及越來越多，伴隨陰影的動畫或多或少都有一點(diǎn)。假設(shè)，我們有下面這樣一個盒子：

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，最簡單的方法當(dāng)然是：

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

因?yàn)檫^渡動畫是在兩個不同的盒陰影狀態(tài)在發(fā)生，所以在過渡動畫的時間內(nèi)，瀏覽器會不斷的重繪盒陰影。而又由于陰影屬于耗性能樣式，所以這種動畫給人的感覺多少有些卡頓。

這里有一個小技巧可以優(yōu)化這種情況下的陰影動畫。

使用偽元素及透明度進(jìn)行優(yōu)化

使用偽元素及透明度進(jìn)行優(yōu)化，我們給上述元素添加一個 before 偽元素，大小與父 div 一致，并且提前給這個元素添加好所需要的最終的盒陰影狀態(tài)，但是元素的透明度為 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 設(shè)置為 1 即可。

div:hover::before {
    opacity: 1;
}

這樣做的好處是，實(shí)際在進(jìn)行的陰影變化，其實(shí)只是透明度的變化，而沒有對陰影進(jìn)行不斷的重繪，有效的提升了陰影動畫的流暢程度，讓它看起來更加絲滑。

為什么對透明度opacity進(jìn)行動畫要比對box-shadow進(jìn)行動畫性能更好呢？可以看看這里這張表格，列舉了不同屬性變換對頁面重排、重繪的影響：

very few CSS properties

最后，Demo 可以看看：

CodePen Demo -- 優(yōu)化box-shadow動畫

存在的問題，另外一種方案

原文中上述這個方案其實(shí)并不算太完美，因?yàn)樽罱K的效果是兩個陰影的疊加效果，可能會在整體的感覺上陰影顏色更深了一點(diǎn)。

所以需要對最終狀態(tài)的陰影進(jìn)行微調(diào)一下，削弱一點(diǎn)效果，盡量讓兩個陰影的疊加效果與單一一個陰影效果相近。

當(dāng)然，我們可以再對上述方案進(jìn)行優(yōu)化，我們再使用一個::after偽元素，::after偽元素設(shè)置為初始狀態(tài)且透明度為1，::before偽元素設(shè)置為末尾狀態(tài)且透明度為0：

上述就是小編為大家分享的如何在CSS中優(yōu)化陰影動畫了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：如何在CSS中優(yōu)化陰影動畫
轉(zhuǎn)載源于：http://bm7419.com/article14/psdege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗(yàn)、網(wǎng)站排名、小程序開發(fā)、域名注冊、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)