使用CSS3给网站LOGO添加扫光特效

487次阅读

共计 1142 个字符，预计需要花费 3 分钟才能阅读完成。

在知更鸟大神的网站看到他的 Begin 主题 Logo 有扫光特效，看起来还是比较炫的。研究了一下，发现是用:before 选择器实现的扫光效果，现在把代码甩出来，觉得好看的可以在自己的站点上试一试。
下面用一个 HTML 结构演示来说明一下：

<div class="logo">
<a href="https://www.chendexin.com/" rel="home" itemprop="url">
<img src="https://www.chendexin.com/images/logo.png" alt="logo" itemprop="logo" width="150" height="50">
</a>
</div>

Logo 扫光效果实现方式：
1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层；
2、用 transform:rotate(-45deg) 旋转 45 度；
3、@ keyframes 规则来控制扫光效果的起始位置和结束位置；
4、用 CSS 控制位置和动画时间等。

方法很简单，只需要添加一段 css 代码即可，如果你是 wordpress 程序，那么请在当前主题 css 文件最下方添加如下代码，需注意：代码中的.logo:before，根据自己的实际情况修改为当前主题的 Logo 元素选择器名称。

/**
* logo 扫光效果 CSS 代码
*/
.logo:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(-45deg);
    animation: blink 2s ease-in 1s infinite; /** 第一个数字参数控制扫光速度，数字越大越慢 **/
}
@-webkit-keyframes blink {from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-o-keyframes blink {from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-moz-keyframes blink {from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@keyframes blink {from {left: -100px;top: 0;}
    to {left: 320px;top: 0;}
}
/**logo 扫光效果 CSS-end**/

需要注意的几点：
1、:before 选择器在被选元素的内容前面插入内容。
2、可以使用 content 属性来指定要插入的内容。
3、所有主流浏览器都支持 :before 选择器。
4、: before 在 IE8 中运行，必须声明 <!DOCTYPE>。

正文完