纯代码为网站logo添加闪光动画效果 适用于所有网站

阿里云爆款云主机

安全、稳定、快速。限时优惠,低至3折

现在购买

特别声明:本站文章多为原创,部分网络转载内容,如有侵权请联系我们!

我们浏览网站时经常会看到一些网站的LOGO带有扫光效果,像光线扫过一样,看上去比较美观。以前楚狂人曾经自己用软件做过一个GIF格式的logo,可以达到类似的效果,但是今天发现可以用纯代码实现网站logo扫光的效果,还是很不错的。

LOGO闪光动画代码:

这段代码是CSS格式代码,一般情况下是添加到网站的主样式表中,对于大多数使用wordpress建站的朋友来说可以放到主题的style.css文件中,也有部分主题可能有单独的css文件,比如本站现在用的DUX主题其主样式文件为main.css,所以大家可以根据自己主题或者模版的情况选择放到相应的CSS文件即可。

/**logo闪光效果CSS**/
.logo{
 position: relative;
 overflow: hidden;
 float:left;
 max-height: 50px;
}
.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;}
}

@keyframes 规则控制扫光的起始位置和终止位置,以上的参数根据自己的logo的大小和布局进行调整即可。大家可以根据自己需要调整上面代码中的参数以适应自己的站点logo。

PS:部分自适应的主题需要把下面这段代码去掉:

.logo{ 
 position: relative;
 overflow: hidden; 
 float:left; 
 max-height: 50px; 
}

使用wordpress的站长可以把代码中的.logo修改成自己主题使用的logo元素选择器名称,比如有的是.site-logo。原则上说这个代码应该可以适用于所有网站,并不仅限于wordpress程序。

未经允许不得转载:作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《纯代码为网站logo添加闪光动画效果 适用于所有网站》 发布于2018-10-06

分享到:
赞(7) 打赏

评论 2

5 + 4 =
  1. #1

    第一次见这个效果是在知更鸟的网站Logo,觉得很炫酷,以为是 GIF 动画,原来是代码实现的。果然应了一句话:贵在折腾。呵呵

    maqingxi12个月前 (10-07)回复
    • 哈哈,是啊,我以前也用gif动画做过一次,现在知道用CSS了

      管理员楚狂人12个月前 (10-07)回复
纯代码为网站logo添加闪光动画效果 适用于所有网站

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阿里云主机爆款活动
云服务器全场2折起,活动期间,用户通过本活动页面购买指定云产品,可享受相应的优惠折扣同一用户限购1单。
切换注册

登录

忘记密码 ?

切换登录

注册