AI摘要

本文提供了一段子比主题Logo扫光效果的CSS美化代码,将其添加到后台自定义CSS样式处即可实现Logo扫光动画。

效果演示:

CSS代码:

CSS代码,添加到后台子比主题设置—>自定义代码—>自定义CSS样式

[hidecontent type="logged"]
/* 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;}}
/* logo扫光 结束*/
[/hidecontent]