簡(jiǎn)單經(jīng)典的LOGO掃光特效，吸引訪客的目光，加強(qiáng)品牌印象
一些頗有特色的網(wǎng)站會(huì)在LOGO的位置添加一共掃光，吸引訪客的注意力，起到以前強(qiáng)化品牌的作用，這一次的WordPress美化教程就和大家分享一下實(shí)現(xiàn)的方法。
- 原文參考：詳情
效果演示
相關(guān)代碼
.logo:before{
content: "";
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);/*角度傾斜45*/
-webkit-animation: n-blink 1s ease-in 1s infinite;/*光掃過去的時(shí)間，自己修改，可以加快*/
animation: n-blink 1s ease-in 1s infinite;/*光掃過去的時(shí)間，自己修改，可以加快*/
}
@-webkit-keyframes n-blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-o-keyframes n-blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@-moz-keyframes n-blink {
from {left: 10px;top: 0;}
to {left: 320px;top: 0;}
}
@keyframes n-blink {
from {left: -100px;top: 0;}
to {left: 320px;top: 0;}
}怎么使用
將以上CSS代碼添加至主題根目錄下的style.css底部保持即可，前臺(tái)刷新本地瀏覽器緩存即可看到效果。
代碼解釋
第一行的.logo是確定特效的位置，各位可以自行修改，推薦指定一個(gè)更加準(zhǔn)確的位置，例如：.header-logo .logo
