樱花飞舞

思路
混合原型模式生成随机雪花: 颜色大小运动方式位置(x,y)
雪花运动向下掉落, 当雪花超出屏幕, 在页面中随机生成一个新雪花
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        *{margin: 0;padding: 0;} 
        .snow{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            /*font-size: 80px; 
            color: pink; 
            animation: snow_rotateY 3s linear infinite;*/ 
            animation: 3s linear infinite; 
        } 
 
        @keyframes snow_rotate { 
            from{ 
                transform: rotate(0deg); 
            } 
            to{ 
                transform: rotate(360deg); 
            } 
        } 
        @keyframes snow_rotateX { 
            from{ 
                transform: rotateX(0deg); 
            } 
            to{ 
                transform: rotateX(360deg); 
            } 
        } 
        @keyframes snow_rotateY { 
            from{ 
                transform: rotateY(0deg); 
            } 
            to{ 
                transform: rotateY(360deg); 
            } 
        } 
 
        body{ 
            overflow: hidden; 
        } 
</style> 
</head> 
<body> 
<!--<div class="snow">❅</div>--> 
<script> 
 
    /** 
     * 雪花类 
     * @param color 颜色 
     * @param size 大小 
     * @param animateName 动画方式 
     * @param x left值 
     * @param y top值 
     * @constructor 
     */ 
 
    // [0,255] 
    function randomNum(num){ 
        return parseInt(Math.random()*num); 
    } 
 
    var animateNames = ['snow_rotate','snow_rotateX','snow_rotateY'];// 动画名称数组 
 
    function Snow(){ 
        this.color = 'rgb(255,'+randomNum(256)+','+randomNum(256)+')'; 
        this.size = randomNum(60)+20; //[20, 80) 
        this.animateName = animateNames[randomNum(3)]; 
        this.x = randomNum(window.innerWidth); 
        this.y = randomNum(window.innerHeight/2); 
    } 
 
    Snow.prototype.show = function () { 
        // 创建小雪花 
        var snow = document.createElement('div'); 
 
        //设置雪花属性 
        snow.className = 'snow'; 
        snow.innerText = '✾';//☂ ☯ ✾ ❅ 🌹 
 
        snow.style.color = this.color; 
        snow.style.fontSize = this.size + 'px'; 
        snow.style.animationName = this.animateName; 
        snow.style.left = this.x +'px'; 
        snow.style.top = this.y +'px'; 
 
        //放入页面 
        document.body.appendChild(snow); 
    }; 
 
 
    //new Snow().show(); 
    for (var i = 0; i < 100; i++) { 
        new Snow().show(); 
    } 
 
 
    // 雪花下落 
    var snows = document.getElementsByClassName('snow'); 
    setInterval(function () { 
        for (var i = 0; i < 10; i++) { 
            var snow = snows[i]; 
            /*** 
             * 判断雪花是否超出屏幕, 
             * 如果超出删除雪花,生成一个新雪花 
             * */ 
            if(snow.offsetTop>window.innerHeight){ 
                document.body.removeChild(snow);//删除 
                new Snow().show();//添加 
            }else{ 
                snow.style.top = snow.offsetTop+1 +'px'; 
            } 
        } 
    },10); 
 
</script> 
 
</body> 
</html> 
posted @ 2018-09-06 19:31 林宇风阅读(266) 评论(0) 编辑收藏举报
刷新页面返回顶部