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：
//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) {
css特效文字var img = ateElement("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%";
setTimeout(function() {
}, 10000);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。