在 WordPress 网站中实现 Logo 动态扫光效果，可以通过多种方式来完成，包括使用 CSS 代码、插件或主题功能等，从而提升品牌视觉吸引力和用户互动体验。

今天十一张（www.11zhang.com）分享一个在不使用插件的情况下仅通过 CSS 代码实现 WordPress 网站的 Logo 动态扫光效果的方法。

设置方法

如果您希望在 WordPress 网站上实现 Logo 的动态扫光效果，可以在当前主题的 style.css 文件底部中添加特定的 CSS 代码。

如果你使用的是Zibll子比主题，那就更简单了！只需将下面的代码放到 [Zibll主题设置] - [全局功能] - [自定义代码] - [自定义css样式] 处即可，如下图。

/*logo扫光 开始*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}
.navbar-brand: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 6s ease-in 0s infinite;
-o-animation: searchLights 6s ease-in 0s infinite;
animation: searchLights 6s ease-in 0s infinite;}/*光扫过去的时间*/
@-moz-keyframes searchLights{
50%{left: -100px; top: 0;} 
65%{left: 120px; top: 100px;}
}
@keyframes searchLights{
40%{left: -100px; top: 0;}
60%{left: 120px; top: 100px;}
80%{left: -100px; top: 0px;}
}
/*logo扫光 开始*/

美化效果

刷新浏览器即可看到效果，如下图。

温馨提示

扫光的视觉与 Logo 有关，确保 Logo 文件格式为 PNG 或 WebP，并具有透明背景，以避免显示问题。