给你的网站logo添加个css帅气扫光特效
最初看到扫光特效还真的以为是gif，发现并不是，发现基本上都是用 :before 选择器实现的扫光效果，具体扫光参数可以自定义，可以用次方法在自己的站点上试试。在一些WordPress模板上常见此特效，当然也可以用于其他建站系统的站点。
具体扫光演示:红尘资源网 www.hcw3.cn
方法开始
步骤一:电脑右击，手机当然也可以找到相应工具即可，获取首页源码，确定你的网站logo的class属性名称
以下图片为例即此站logo的class属性就是logo
步骤二:找到所用模板文件得全局css开始添加:before 选择器代码
提示(.logo:before{ )若class属性为其他括号中则改为其他。
.logo:before{
content:"";
position: absolute;
left: -665px;
top: -460px;
width: 120px;
height: 10px;
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 1.5s 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，刷新缓存查看效果，因每站结构不同，可能效果显示有差别，可以根据具体情况自行修改相关扫光参数。
注意以下问题：
1、:before 选择器在被选元素的内容前面插入内容。
2、可以使用 content 属性来指定要插入的内容。
3、所有主流浏览器都支持 :before选择器。
4、: before在IE8中运行，必须声明 <!DOCTYPE>。
还没有评论，来说两句吧...