wordpress主题网站logo添加扫光效果教程

说明：

在网上看到知更鸟博客logo都有光一闪一闪的效果，刹是惹人喜欢，于是在网上看了下产生扫光效果的原因，原来是通过css代码实现，于是自己看着别人的博客自己鼓捣了下，于是也给自己的logo加了扫光效果。

教程：

将下面这段代码添加到主题的样式表的结尾，对于大多数主题来说为style.css文件；

/**logo扫光效果CSS 开始**/.logoimg {
 /**根据logo外div样式名称修改名称，如果是ripro 请修改成 .logo-wrapper**/
 position: relative;
 overflow: hidden;
 float: left;
 max-height: 90px;
}

.logoimg:before {
 /**根据logo外div样式名称修改before前名称，如果是ripro 请修改成 .logo-wrapper**/
 content: "";
 position: absolute;
 width: 180px;
 height: 10px;
 /**光标的宽度，可根据实际调整**/
 background-color: rgba(255, 255, 255, 0.5);
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: blink 1s ease-in 1s infinite;
 animation: blink 1s ease-in 1s infinite;
 /**第一个数字参数控制扫光速度，数字越大越慢**/
}

@-webkit-keyframes blink {
 from {
  left: 10px;
  top: 0;
 }

 to {
  left: 320px;
  top: 0;
 }
}

@-o-keyframes blink {
 from {
  left: 10px;
  top: 0;
 }

 to {
  left: 320px;
  top: 0;
 }
}

@-moz-keyframes blink {
 from {
  left: 10px;
  top: 0;
 }

 to {
  left: 320px;
  top: 0;
 }
}

@keyframes blink {
 from {
  left: -100px;
  top: 0;
 }

 to {
  left: 320px;
  top: 0;
 }
} /**logo扫光效果CSS 结束**/

保存后去看看效果。