JS按钮闪烁功能是如何实现的

JavaScript013

JS按钮闪烁功能是如何实现的,第1张

用css3更简单

首先定义一个闪烁的-webkit-animation 的name为twinkling，效果是透明度从0到1

@-webkit-keyframes twinkling{

/*透明度由0到1*/

0%{

opacity:0/*透明度为0*/

}

100%{

opacity:1/*透明度为1*/

}

}

然后设置需要闪烁的button的样式：

button{

-webkit-animation: twinkling 1s infinite ease-in-out

}

其中twinkling 为上面定义的，时间为1s，动画无限次，动画效果是ease-in-out

好吧~给你个代码示例：

<div id="ceshi">这里是闪烁的字体！</div>

<script>  

(function(){

    var text=document.getElementById("ceshi")

    function color(){

        if(text.style.color=="red"){

            text.style.color="yellow"

        }

        else{

            text.style.color="red"

        }

        setTimeout(function(){

           color() 

       },200)

    }

    color()

})()

</script>

不懂的话再问我吧~