WordPress-OneNav主题的logo扫光特效

教程 2个月前 壳壳
363 0 0
最后更新于2022年3月20日,已超过66天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

研究思路
用 CSS3 伪元素 :bfore 或 :after 添加一段扫光层代码;
用 transform:rotate(-45deg) 旋转 45 度(角度可自定义);
CSS 控制位置和动画时间等。
:before 选择器介绍
:before 选择器在被选元素的内容前面插入内容。
使用 content 属性来指定要插入的内容。
所有主流浏览器都支持:before选择器。
before在IE8中运行,必须声明 <!DOCTYPE> 。
:befor、:after是CSS的伪元素。
代码复制
绑定logo对应标签代码如下,效果可参考本网站logo(网站左上角)。

.header-logo {position:relative;float:left;margin-right:10px;padding:5px 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);/*角度倾斜45*/
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite;/*光扫过去的时间,自己修改,可以加快*/1s ease-in表示扫过去时间
}
@-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; }
}

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

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

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

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

 

怎么使用
将以上CSS代码添加至主题根目录下的style.css底部保持即可,前台刷新本地浏览器缓存即可看到效果。

代码解释
第一行的.header-logo是确定特效的位置,各位可以自行修改,推荐指定一个更加准确的位置,例如:.header-logo  .logo

最终结论
一步轻松实现WordPress网站logo扫光效果(亲测)的关键在于:正确找出logo绑定的标签ID;设置overflow: hidden;正确复制文中代码。

版权声明:壳壳 发表于 2022年3月20日 下午6:45。
转载请注明:WordPress-OneNav主题的logo扫光特效 | 壳壳博客

相关文章

暂无评论

暂无评论...
壳壳博客一键登录开启个人书签等功能!