Loading
0

wordpress主题网站logo添加扫光效果教程

公众号搜索菜鸟站长之家 腾讯云服务器活动

说明:

在网上看到知更鸟博客logo都有光一闪一闪的效果,刹是惹人喜欢,于是在网上看了下产生扫光效果的原因,原来是通过css代码实现,于是自己看着别人的博客自己鼓捣了下,于是也给自己的logo加了扫光效果。

教程:

将下面这段代码添加到主题的样式表的结尾,对于大多数主题来说为style.css文件;

/**logo扫光效果CSS 开始**/
#header .logo{position:relative;float:left;margin-right:20px;padding:15px 0;overflow: hidden;}
#header .logo a: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; }
}
/**logo扫光效果CSS 结束**/

参数配置

#header .logo根据每个网站style.css而定,可能为.logo、#logo等,可参考自己网站的css文件配置。

#header .logo a:before一般网站logo都带有A标签跳转,所以在此设置a:before的CSS,即在A标签生效前执行该段CSS。

overflow: hidden这个代码非常重要,可以限制扫光效果在logo所占的范围内,避免扫光效果溢出,影响美观。

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可(按F12可以修改参数自行调试)。

保存后去看看效果。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系菜鸟站长之家小编,或者自行点击 投稿
4、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
5、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。
6、如遇下载地址失效,请留言告知或者联系客服获取。