WordPress OneNav主题的logo扫光特效

21次阅读
没有评论

: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;}

}

#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;正确复制文中代码。

WordPress
1
每日忙乎
版权声明:本站原创文章,由 每日忙乎 2022-08-03发表,共计1350字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码
载入中...