WordPress教程

为网站LOGO添加扫光特效

为什么有些网站logo会有一道会动的光效?之前还以为是GIF图,今天在闲逛时发现竟然是个扫光特效,之前还没了解到过,惭愧惭愧。

下面给大家分享网站LOGO扫光特效的CSS代码:

 float:left;
  max-height: 50px;
}
.site-logo:before {
    content: "";
    position: absolute;
    width: 150px;
    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;}
}

将上面的代码复制 进主题的主要样式表当中并上传,大多数主题的主要样式表命名为style.css,但是有一部分主题的不一样,这个需要自己去寻找。

当然也可以修改部分参数,达到完美匹配的效果。

另外,在某些自适应站点当中可能会出错 ,可以试着将以下代码删除(也就是第一段):

.site-logo{ 
    position: relative;
    overflow: hidden; 
    float:left; 
    max-height: 50px; 
}
We can do it.

烟花点击特效

上一篇

网络广告常见的付费形式

下一篇

你也可能喜欢

4 条评论

  1. :razz: 我的小站连个logo都还没有呢

    1. @梁兴健 可以试着去找一些免费LOGO生成。

  2. 看起来还挺简单的,不过我的主题带这种功能,没有用扫光

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
猫鼬 管理员
We can do it.
最近文章
  • * 没有更多文章了
  • TAGS

    为网站LOGO添加扫光特效

    长按储存图像,分享给朋友