js,css简单实现闪烁效果(效果切换)

一、js方法
<style>
    div {
        background-color: red;
        height: 100px;
        width: 100px;
    }

    div.flash {
        background-color: green;
    }
</style>

<body>
    <div></div>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
</body>
<script>
    var flashing;
    $('.start').on('click', startFlash);
    $('.pause').on('click', pauseFlash);
    function startFlash() {
        flashing = setInterval(function () {
            $('div').toggleClass('flash')
        }, 100);
    }
    function pauseFlash() {
        clearInterval(flashing);
    }
</script>
二、css方法
<style>
    div {
        background-color: red;
        height: 100px;
        width: 100px;
    }

    div.flash {
        animation: myfirst .1s infinite;
        -webkit-animation: myfirst .1s infinite;
    }

    @keyframes myfirst {
        from {
            background: red;
        }

        to {
            background: yellow;
        }
    }
</style>

<body>
    <div></div>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
</body>
<script>
    var flashing;
    $('.start').on('click', startFlash);
    $('.pause').on('click', pauseFlash);
    function startFlash() {
        $('div').addClass('flash')
    }
    function pauseFlash() {
        $('div').removeClass('flash')
    }
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容