CSS轻松实现博客网站Logo扫光效果

最近有网友跟我反馈，想要一个logo扫光的特效，第一款主题梦想家就有这个特效，不过后期也有人反馈说太卡，使用主题的时候CPU就爆了，好吧，那我就撤了，把相关的特效删除了没在跟紧，记得之前张戈在博客中有谈到过这个事情，也是因为logo特效导致网站有些卡，所以他就给删除了，然后也好了，很神奇是不？

我就想着为什么有些人会卡有些人不卡呢，服务器配置太低，但是一个css而已的，应该占不上太多的资源吧，抽空把css的logo扫光特效优化下，在主题模板中也用上了最新的logo扫光，当然也一定是加上了开关，并不是所有人都喜欢的就弄个开关吧，两者互不影响，好了现在把代码献出，自行折腾。

html代码：

<div class="logo">
<a href="https://www.manongw.com/" rel="external nofollow"  title="李洋博客" rel="home">
<img src="https://www.manongw.com/static/manongw/images/logo.png" alt="码农网">
</a>
</div>

css代码：

经过测试没有问题了，实际使用几天再看看效果吧，主题模板有更新的基本都会加上去，至于是否开启扫光特效根据个人喜好而定吧，直接使用是不能够的，毕竟不是所有的主题模板都是使用logo命名，都得需要修改一些基础代码，记得修改之前要备份！备份！备份！要知道养成良好的备份习惯有多么的牛掰，好了，有问题留言反馈，一起学习，一起折腾！

.logo a{
overflow:hidden;
display: block;
}
.logo a: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: flashlights 1s ease-in 1s infinite;
-o-animation: flashlights 1s ease-in 1s infinite;
animation: flashlights 1.5s ease-in 1s infinite;/**1.5数字参数控制扫光速度，数字越大越慢**/
}
@-webkit-keyframes flashlights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes flashlights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes flashlights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes flashlights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}