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();


本文标题:HTML元素闪烁效果
本文链接:https://lanseyujie.com/post/html-element-blink-effect.html
版权声明:本文使用「署名 4.0 国际」创作共享协议,转载或使用请署名并注明出处。
点赞 0 分享 0
呃...本文暂时没人留言,来添加一个吧!