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

html代碼：

<div class="logo">

<a href=http://nicolefarrar.com/>

<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;/**光標的寬度，可根據實際調整**/

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數字參數控制掃光速度，數字越大越慢**/

}

@-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;}

}

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

掃一掃，瀏覽關注本文