Loading
0

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 结束**/

保存后去看看效果。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
4、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。