欢迎光临
我们一直在努力

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

保存后去看看效果。

赞(0)
未经允许不得转载:阿强爱分享 » wordpress主题网站logo添加扫光效果教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址