首先定义一个闪烁的-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>
不懂的话再问我吧~
如图所示，当鼠标移上canvas区域的时候，显示星星闪烁的效果，星星本身还会有一个缓慢飘动的速度，当星星飘出canvas区域的时候，该星星消失，canvas区域的某个地方又会重生一个星星。首先准备两张图片：
背景图：girl.jpg
星星的序列帧图片：star.png
js库：commonFunctions.js
项目主文件：index.html
文件目录如下：
