的背景颜色会在五秒之内从红色变为黄色。
注意:使用animation和@keyframes时不同浏览器需要加上不同的前缀名!
下面代码实现雪花飘落功能:
?
?
? ?
?
? ? ? ?
?
? ? ? ?
snowing snow?
? ? ? ? ?
? ? ?
? ? ?
? ? ? ?
?
? ? ? ?
?
? ? ?
? ? <script>?
? ? ? ? (function(){?
? ? ? ? ? ? function snow(left,height,src){?
? ? ? ? ? ? ? ? var div = document.createElement("div");?
? ? ? ? ? ? ? ? var img = document.createElement("img");?
? ? ? ? ? ? ? ? div.appendChild(img);?
? ? ? ? ? ? ? ? img.className = "roll";?
? ? ? ? ? ? ? ? img.src = src;?
? ? ? ? ? ? ? ? div.style.left=left+"px";?
? ? ? ? ? ? ? ? div.style.height=height+"px";?
? ? ? ? ? ? ? ? div.className="div";?
? ? ? ? ? ? ? ? document.getElementById("snowzone").appendChild(div);?
? ? ? ? ? ? ? ? setTimeout(function(){?
? ? ? ? ? ? ? ? ? ? document.getElementById("snowzone").removeChild(div);?
? ? ? ? ? ? ? ? // console.log(window.innerHeight);?
? ? ? ? ? ? },5000);?
? ? ? ? ? ? }?
? ? ? ? ? ? setInterval(function(){?
? ? ? ? ? ? ? ? var left = Math.random()*window.innerWidth;?
? ? ? ? ? ? ? ? var height = Math.random()*window.innerHeight;?
? ? ? ? ? ? ? ? var src = "s"+Math.floor(Math.random()*2+1)+".png";//两张图片分别为"s1.png"、"s2.png"?
? ? ? ? ? ? ? ? snow(left,heig