WordPress-给博客添加logo扫光效果-Ac's Blog

教程

给WordPress博客添加logo扫光效果，能让博客显得更高级，更美观。使用普通WordPress模板，我们只需要打开WordPress博客后台，找到外观->自定义->额外CSS，将以下代码放置进去即可完成扫光效果设置。如果你使用子比主题的话，你可以把代码放到子比主题设置->全局和功能->自定义代码->自定义CSS样式里面即可。

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