在知更鸟大神的网站看到他的Begin主题Logo有扫光特效，看起来还是比较炫的。研究了一下，发现是用:before选择器实现的扫光效果，现在把代码甩出来，觉得好看的可以在自己的站点上试一试。
Logo扫光方法
方法很简单，只需要添加一段css代码即可，如果你是WordPress程序，那么请在当前主题css文件最下方添加如下代码，需注意：代码中的#logo:before，根据自己的实际情况修改为当前主题的Logo元素选择器名称。
- /**logo扫光效果CSS**/
- #logo:before{
- content:“”;
- position: absolute;
- left: –665px;
- top: –460px;
- width: 200px;
- height: 15px;
- 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: searchLights 1s ease-in 1s infinite;
- -o-animation: searchLights 1s ease-in 1s infinite;
- animation: searchLights 1s ease-in 1s infinite;
- }
- @-webkit-keyframes searchLights {
- 0% { left: –100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @-o-keyframes searchLights {
- 0% { left: –100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @-moz-keyframes searchLights {
- 0% { left: –100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
- @keyframes searchLights {
- 0% { left: –100px; top: 0; }
- to { left: 120px; top: 100px; }
- }
当然，此效果也适用于其他建站程序，其仅仅是一个CSS效果而已。
声明：站长码字很辛苦啊,转载时请保留本声明及附带文章链接：https://blog.tag.gg/showinfo-19-18738-0.html
亲爱的：若该文章解决了您的问题,可否收藏+评论+分享呢？
文章评论 本文章有个评论