js+css实现花瓣飘落效果

最新推荐文章于 2024-04-17 20:41:40 发布

原创最新推荐文章于 2024-04-17 20:41:40 发布 · 2.8k 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS动画实现风动效果的方法，并通过JavaScript动态生成图片粒子，使其随风飘动。具体实现了动画的速度变化及图片粒子的随机生成与移除。

部署运行你感兴趣的模型镜像

<div class="main pop-box"></div>

css：

@keyframes wind{
    0% {
        bottom: 100%;
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-90deg);
        bottom: -10%;
    }
}
//可添加不同速度
.speed1{
    position: absolute;
    animation: wind 5s linear;
}

js：

//imgs=[]
            timeFun(imgs){				    
				var self = this	
				var len = imgs.length
			    this.popTimer = setInterval(function() {
			       var left = Math.random() * window.innerWidth;
			       var top =0;			       
			       var index = Math.floor(Math.random() * len)
			       var src = imgs[index]			       
			       self.wind(left, top, src);
			    }, 250);
			},
			wind(left, top, src) {
		        var img = document.createElement("img");
		        img.className = "speed1"
		        img.src = src;  
		        img.style.width = Math.random()*(2.2-0.6)+0.6 + "rem";
		        img.style.height =  "auto";
		        img.style.left = left + "px";
		        img.style.bottom = "100%";
		        document.getElementsByClassName("pop-box")[0].appendChild(img);
		        setTimeout(function() {
		            document.getElementsByClassName("pop-box")[0].removeChild(img);
		        }, 10000);
		    }

您可能感兴趣的与本文相关的镜像

Llama Factory

模型微调

LLama-Factory

LLaMA Factory 是一个简单易用且高效的大型语言模型（Large Language Model）训练与微调平台。通过 LLaMA Factory，可以在无需编写任何代码的前提下，在本地完成上百种预训练模型的微调