js+css实现花瓣飘落效果

<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：

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

}