HTML元素闪烁效果

<!-- 闪烁的部分 -->
<a class="qqonline">
    <i id="blink" class="fa fa-qq fa-fw" style="visibility: visible;"></i>
</a>

纯CSS3实现闪烁

/* 定义keyframe动画,命名为blink */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 1; }
  50.01% { opacity: 0; } /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */
  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; }
}

/* 定义blink类 */
i#blink {
    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;
    color: #dd4814;
}

Javascript实现闪烁

function show() {
    var blink = document.getElementById("blink");
    blink.style.visibility = (blink.style.visibility == "visible") ? "hidden" : "visible";
    setTimeout('show()', 500);
}
show();


本文链接:
版权声明: 除特别说明外,本文由 森林生灵 @ 蓝色域界 原创编译。
分享本文:
呃...本文暂时没人评论,来添加一个吧!

个人中心

访客

请先登录注册

微信 微信二维码 QQ在线