CSS3利用keyframes制个边栏字体图标闪烁特效

CSS3 的功能强大，animation实现的动画更让我们无法想象，大家在访问知名博客知更鸟的网站时，会发现侧边栏工具栏有一个QQ图标在不停的闪烁，这样的效果一下便会吸引读者，下面我们一起分析如何实现这种特效。

这里主要使用了animation过定义多个关键帧以及每个关键帧中元素的属性值来实现的动画效果,具体参数，参考CSS3手册！

代码如下：

/* 定义keyframe动画，命名为blink */
@keyframes blink{
  0% {opacity: 1;}
  50%{opacity: 1;}
  50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为０，可以设置闪烁效果 */
  100%{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}
.online .fa-qq {
    animation: blink .75s linear infinite; 
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
}

HTML结构：

<div class="online"><a href="#"  class="toolbar-item "><i class="fa fa-qq"></i></a></div>

猜你喜欢