這篇文章主要為大家展示了“css如何使用偽元素及透明度進行優(yōu)化”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何使用偽元素及透明度進行優(yōu)化”這篇文章吧。
10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程,更有南票免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
使用偽元素及透明度進行優(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; }
這樣做的好處是,實際在進行的陰影變化,其實只是透明度的變化,而沒有對陰影進行不斷的重繪,有效的提升了陰影動畫的流暢程度,讓它看起來更加絲滑。
為什么對透明度 opacity 進行動畫要比對 box-shadow 進行動畫性能更好呢?可以看看這里這張表格,列舉了不同屬性變換對頁面重排、重繪的影響:
以上是“css如何使用偽元素及透明度進行優(yōu)化”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱:css如何使用偽元素及透明度進行優(yōu)化
網(wǎng)站網(wǎng)址:http://bm7419.com/article44/jdiohe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、面包屑導(dǎo)航、小程序開發(fā)、搜索引擎優(yōu)化、建站公司、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)