最近有網(wǎng)友跟我反饋，想要一個(gè)logo掃光的特效，第一款主題夢(mèng)想家就有這個(gè)特效，不過后期也有人反饋說太卡，使用主題的時(shí)候CPU就爆了，好吧，那我就撤了，把相關(guān)的特效刪除了沒在跟緊，記得之前文章中有談到過這個(gè)事情，也是因?yàn)閘ogo特效導(dǎo)致網(wǎng)站有些卡，所以他就給刪除了，然后也好了，很神奇是不？我就想著為什么有些人會(huì)卡有些人不卡呢，服務(wù)器配置太低，但是一個(gè)css而已的，應(yīng)該占不上太多的資源吧，抽空把css的logo掃光特效優(yōu)化下，在主題模板中也用上了最新的logo掃光，當(dāng)然也一定是加上了開關(guān)，并不是所有人都喜歡的就弄個(gè)開關(guān)吧，兩者互不影響，好了現(xiàn)在把代碼獻(xiàn)出，自行折騰。

html代碼：

<div class="logo">

<a href=http://m.aernsil.cn/>

<img src="https://www.talklee.com/images/logo.png">

</a>

</div>

css代碼：

.logoa{

overflow:hidden;

display:block;

}

.logoa:before{

content:;

position:absolute;

top:-50px;

left:-15px;

width:250px;

height:12px;/**光標(biāo)的寬度，可根據(jù)實(shí)際調(diào)整**/

background-color:rgba(255,255,255,.5);

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

transform:rotate(-45deg);

-webkit-animation:flashlights1sease-in1sinfinite;

-o-animation:flashlights1sease-in1sinfinite;

animation:flashlights1.5sease-in1sinfinite;/**1.5數(shù)字參數(shù)控制掃光速度，數(shù)字越大越慢**/

}

@-webkit-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@-o-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@-moz-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

經(jīng)過測(cè)試沒有問題了，實(shí)際使用幾天再看看效果吧，主題模板有更新的基本都會(huì)加上去，至于是否開啟掃光特效根據(jù)個(gè)人喜好而定吧，直接使用是不能夠的，畢竟不是所有的主題模板都是使用logo命名，都得需要修改一些基礎(chǔ)代碼，記得修改之前要備份！備份！備份！要知道養(yǎng)成良好的備份習(xí)慣有多么的牛掰，好了，有問題留言反饋，一起學(xué)習(xí)，一起折騰！

掃一掃，瀏覽關(guān)注本文