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

WordPress日主题RiPro实现网站logo添加扫光效果插图

使用方法:

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

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

.logo-wrapper:before {
/**根据logo外div样式名称修改before前名称**/
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 结束**/

保存后去看看效果。

站长测试了一下。v2的暂时不生效。有问题留言。

发表评论

您的电子邮箱地址不会被公开。