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

js+css实现花瓣飘落效果相关推荐

基于snowfall的玫瑰花瓣飘落效果
玫瑰花瓣飘落效果做专题时,常常需要添加一些动效,可以让我们的页面活起来就像最近某电商网站一系列雪花飘落效果看了网上封装的snowfall.js配置挺方便的,用起来也蛮好的用法 1.首先引入 ...
html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...
js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述在很多网页中,我们都能看到一个类似于放大镜的效 ...
安卓动态壁纸源码--可直接进入壁纸设置界面+玫瑰花瓣飘落效果+可分享到微博、微信功能--无任何删减2
1.宙斯之眼动态壁纸是作者向喜欢的女孩表白被拒绝后,在失眠的深夜所做.仅以此作送给自己喜欢的女孩,以及所有能够感同身受的人!同时也送给自己,定格那种难以言表的复杂心情. 2.可以设置动态切换壁纸可 ...
android 自定义View实现花瓣飘落效果
在偶然的一次看到别人的动画效果特别好就来实现一个花瓣飘落的效果, 原理就是不断变化坐标,不停的修改坐标值 package com.lzx.lock;import android.content.Con ...
Unity3D 使用粒子组件实现花瓣飘落效果
可直接使用的花瓣飘落资源包
HTML+JS+CSS筋斗云导航栏效果
要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> < ...
红包雨效果html,js+css实现红包雨效果
//每一个红包都是相对于父元素定位,通过z-index来设置层级 let zIndex = 1; function bindEvent() { $redPackage.on('click','.js- ...
html 花瓣飘落效果,html全屏花瓣掉落特效
代码片段和文件信息属性大小日期时间名称 ----------- --------- ---------- ----- ---- 文件 ...

js+css实现花瓣飘落效果

js+css实现花瓣飘落效果相关推荐

最新文章

热门文章