纯代码为网站logo添加扫光动画特效 适用所有网站

我们浏览网站时经常会看到一些网站的LOGO带有扫光效果,像光线扫过一样,看上去比较炫酷美观的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码分享出来,觉得好看的可以在自己的站点上试一试。

研究思路

  1. 用 CSS3 伪元素 :bfore 或 :after 添加一段扫光层代码;
  2. 用 transform:rotate(-45deg) 旋转 45 度(角度可自定义);
  3. CSS 控制位置和动画时间等。

before 选择器介绍

  1. :before 选择器在被选元素的内容前面插入内容。
  2. 使用 content 属性来指定要插入的内容。
  3. 所有主流浏览器都支持:before选择器。
  4. before在IE8中运行,必须声明 <!DOCTYPE> 。
  5. :befor、:after是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;}
}

.logo{
更改为
.你的logo对应元素标签{

.logo:before {
更改为
.你的logo对应元素标签:before {

WordPress添加方法

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

规则控制扫光

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

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

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

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

特别声明:本站的大部分资源多为来自网络,如有资源侵权你的合法利益请联系admin@liecnk.com删除!
利熙博客 » 纯代码为网站logo添加扫光动画特效 适用所有网站

发表评论

有问题需要联系站长吗

立即联系 进交流群