子比主题美化教程：为网站添加 Logo 扫光动效

想让你的子比主题网站 Logo 更具视觉冲击力？好软猫带来一款简洁炫酷的 Logo 扫光动效 美化方案。通过纯 CSS 实现，当页面加载或鼠标悬停时，Logo 上会有一道高光从左至右划过，模拟“金属反光”效果，提升品牌质感与科技感。本教程适配 Zibll 子比主题，只需在「主题设置 → 自定义 CSS」中粘贴代码即可生效，无需修改文件，主题更新无忧。

Logo 扫光动效 CSS 代码

/* logo 扫光 _ 好软猫[www.haoruanmao.com] */
.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);-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 扫光 _ 好软猫[www.haoruanmao.com] */