利用CSS3中animation属性实现雪花飘落功能


先介绍一下CSS3中的animation的特性吧。

在CSS3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transform，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。

利用CSS3中animation属性实现雪花飘落功能演示网址：l

最终效果：

利用CSS3中animation属性实现雪花飘落功能

比如：

@keyframes bgchange{ 
    from {background:red;} 
    to    {background:yellow} 
} 
 
div:hover{ 
    animation:bgchange 5s; 
} 

当鼠标悬停在<div>时，该<div>的背景颜色会在五秒之内从红色变为黄色。

注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！

下面代码实现雪花飘落功能：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>snowing snow</title> 
        <style> 
            body{ 
                background: #eee; 
            } 
            @keyframes mysnow{ 
                0%{ 
                    bottom:100%; 
                    opacity:0; 
                } 
                50%{ 
                    opacity:1; 
                    transform: rotate(1080deg); 
                } 
                100%{ 
                    transform: rotate(0deg); 
                    opacity: 0; 
                    bottom:0; 
                } 
            } 
            @-webkit-keyframes mysnow{ 
                0%{ 
                    bottom:100%; 
                    opacity:0; 
                } 
                50%{ 
                    opacity:1; 
                    -webkit-transform: rotate(1080deg); 
                } 
                100%{ 
                    -webkit-transform: rotate(0deg); 
                    opacity: 0; 
                    bottom:0; 
                } 
            } 
            @-moz-keyframes mysnow{ 
                0%{ 
                    bottom:100%; 
                    opacity:0; 
                } 
                50%{ 
                    opacity:1; 
                    -moz-transform: rotate(1080deg); 
                } 
                100%{ 
                    -moz-transform: rotate(0deg); 
                    opacity: 0; 
                    bottom:0; 
                } 
            } 
            @-ms-keyframes mysnow{ 
                0%{ 
                    bottom:100%; 
                    opacity:0; 
                } 
                50%{ 
                    opacity:1; 
                    -ms-transform: rotate(1080deg); 
                } 
                100%{ 
                    -ms-transform: rotate(0deg); 
                    opacity: 0; 
                    bottom:0; 
                } 
            } 
            @-o-keyframes mysnow{ 
                0%{ 
                    bottom:100%; 
                    opacity:0; 
                } 
                50%{ 
                    opacity:1; 
                    -o-transform: rotate(1080deg); 
                } 
                100%{ 
                    -o-transform: rotate(0deg); 
                    opacity: 0; 
                    bottom:0; 
                } 
            } 
            .roll{ 
                position:absolute; 
                opacity:0; 
                animation: mysnow 5s ; 
                -webkit-animation: mysnow 5s ; 
                -moz-animation: mysnow 5s ; 
                -ms-animation: mysnow 5s ; 
                -o-animation: mysnow 5s ; 
                height:80px; 
            } 
            .div{ 
                position:fixed; 
            } 
        </style> 
    </head> 
    <body> 
        <div id="snowzone" > 
        </div> 
    </body> 
    <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,height,src); 
            },500); 
        })(); 
    </script> 
</html> 

两张雪花图片：

《HTML5与CSS3权威指南》及相配套源码 

本文永久更新链接地址：

相关内容