css3雪花特效-JS和CSS3实现简单的雪花跳舞效果

bendan520 css3

2023-08-29 0 7,258 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

昨天看到一个后端笔试题目，说是使用CSS3完成一个简单的雪花动画效果。我google了一下，大部分都比较长，虽然特效比较好。

但由于我追求简单，所以我找了一个demo模仿他的想法，重新写了一遍。代码略有不同css3雪花特效css3雪花特效，但疗效相似。完成后是这样的——雪花疗效

HTML 和 CSS

 
body { background: #eee; }
@keyframes mysnow {
    0% { bottom: 100%; opacity: 0; }
    50% { opacity: 1; transform: rotate(720deg);}
    100% { transform: rotate(0deg); opacity: 0; bottom: 0%;}
}
.container { position: fixed; }
.pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 30px; }

JavaScript 代码

    window.onload=function(){
        // snowFlow();
        function snowFlow(left,height,src){
            var container=document.createElement('div');
            var pic=document.createElement('img');
            var snowFlow=document.getElementById('snowFlow');
            pic.className='pic';
            container.className='container';    
            snowFlow.appendChild(container);
            container.appendChild(pic);
            container.style.left=left+'px';
            container.style.height=height+'px';
            pic.src=src;
            setTimeout(function(){
                snowFlow.removeChild(container);
            },5000);
        }
            setInterval(function(){
                var left=Math.random()*window.innerWidth;
                var height=Math.random()*window.innerHeight;
                var src = 'snow.png';
                snowFlow(left,height,src);
            },500)
        }

基本思想是在HTML中随机生成div，每个div包含一张雪花图片，用随机数控制div的左边和高度，使其在一定时间内形成动画并最终消失，达到的效果动画由CSS关键帧控制（需要注意兼容性）

收藏 (0) 打赏

感谢您的支持，我会继续努力的!