js+css实现花瓣飘落效果

最新推荐文章于 2021-06-04 18:46:52 发布

rrzzhang

最新推荐文章于 2021-06-04 18:46:52 发布

阅读量2.5k

点赞数 4

本文链接：https://blog.csdn.net/sinrryzhang/article/details/114578068

版权

<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);
		    }