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://www.lanseyujie.com/post/html-element-blink-effect.html
    版权声明:本文使用「署名 4.0 国际」创作共享协议,转载或使用请遵守署名协议。
    点赞 0 分享 0