H5学习之制作雪花下落动画

效果如上，也可以把雪花图片换成毛爷爷的，就成了下面这样

哈哈，是不是很好玩啊！

下面是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雪花下落</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            background-color: black;
            /*隐藏滚动条*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        function Flake(){
            // 每个载入浏览器的HTML文档都会成为document对象
            // document对象使我们可以从脚本访问HTML页面中的所有元素
            var r = document.createElement('img')
            r.src = 'flake.png'
            r.style.position = 'absolute'
            // 获取浏览器可见区域的宽和高
            var w = document.documentElement.clientWidth
            var h = document.documentElement.clientHeight
            // 雪花随机产生的位置
            var top = h*Math.random()
            var left = w*Math.random()

            // 以下三句代码可以确定一朵雪花在浏览器的位置
            r.style.position = 'absolute'
            r.style.top = top + 'px'
            r.style.left = left + 'px'
            // 雪花的图片大小是随机的 scale缩放
            r.style.transform = 'scale('+ Math.random() / 2 +' )'
            // 把创建的新元素img拼接到body上
            document.body.appendChild(r)
            function down(){
                top = top + Math.random()*5
                left = left +Math.random()*5

                if(top > h){
                    top = -100
                }
                if(left >w ){
                    left = -100
                }

                r.style.top = top + 'px'
                r.style.left = left + 'px'
            }
            setInterval(down,50)
        }
        for(var i = 0 ; i<100 ; i++){
            new Flake()
        }
        new Flake()
    </script>
</body>
</html>

素材下载：2017-03-10 雪花下落

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论