成都网站建设公司CSS轻松实现网站Logo扫光效果(亲测有效)

最近有网友跟我反馈，想要一个logo扫光的特效，第一款主题梦想家就有这个特效，不过后期也有人反馈说太卡，使用主题的时候CPU就爆了，好吧，那我就撤了，把相关的特效删除了没在跟紧，记得之前文章中有谈到过这个事情，也是因为logo特效导致网站有些卡，所以他就给删除了，然后也好了，很神奇是不？我就想着为什么有些人会卡有些人不卡呢，服务器配置太低，但是一个css而已的，应该占不上太多的资源吧，抽空把css的logo扫光特效优化下，在主题模板中也用上了最新的logo扫光，当然也一定是加上了开关，并不是所有人都喜欢的就弄个开关吧，两者互不影响，好了现在把代码献出，自行折腾。

html代码：

<div class="logo">

<a href=/>

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

</a>

</div>

css代码：

.logoa{

overflow:hidden;

display:block;

}

.logoa:before{

content:;

position:static;

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命名，都得需要修改一些基础代码，记得修改之前要备份！备份！备份！要知道养成良好的备份习惯有多么的牛掰，好了，有问题留言反馈，一起学习，一起折腾！

扫一扫，浏览关注本文