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

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

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

html代码：

<div class="logo">    <a href="https://www.talklee.com/" title="李洋博客" rel="home">      <img src="https://www.talklee.com/zb_users/theme/hopelee/style/images/logo.png" alt="李洋博客">    </a></div>

css代码：

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

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