jquery+css3实现网页背景花瓣随机飘落特效【转】
随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下
飘花效果的实现——效果图：
需求：
一个jquery，，，这个看标题么就知道了
jQuery Transit还有这个东西
http://github.com/rstacruz/jquery.transit
jquery对一些效果的扩展
飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现
飘花比人物的层级都高
飘花数量非常多
飘花会有一定的轨迹运动
飘花带有渐变的效果
飘花带有旋转的效果
飘花落到地面会消失
这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以
实现原理：
通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等
执行的流程：
getImagesName随机6张图片，snowflakeURl定义一个地址的范围
createSnowBox创建雪花元素的节点，并且增加一个snowRoll的样式，也就是旋转的关键帧实现
定时器设置200ms不断的生成雪花对象，计算出3个属性的初始值，通过createSnowBox创建雪花元素，并且附上初始值，然后执行transition附上最终值，执行动画
动画结束后执行$(this).remove() 删除这个对象
然后精简一下代码，因为我只要飘花效果
<div id='content'><!-- 飘花 --><div id="snowflake"></div> </div>
获取外面#content的宽高
然后#snowflake里面做效果
#content { width: 100%; height: 100%; top: 42px; overflow: hidden; position: absolute; }
然后么css么就是这样了，top：42px是因为我的导航高度
#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; } @-webkit-keyframes mysnow { 0% { bottom: 100%; } 50% { -webkit-transform: rotate(1080deg); } 100% { -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px); } } @-moz-keyframes mysnow { 0% { bottom: 100%; } 50% { -moz-transform: rotate(1080deg); } 100% { -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px); } }
这里是给飘花加旋转之类的css3特技
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="xxx/js/jquery.transit.js"></script><script type="text/javascript">$(function() {var snowflakeURl = ['img/timg.jpg','img/timg.jpg','img/timg.jpg','img/timg.jpg','img/timg.jpg','img/timg.jpg',] //js设置数组存储6张花瓣的图片var container = $("#content");visualWidth = container.width();visualHeight = container.height();//获取content的宽高/////////飘雪花 /////////function snowflake() {// 雪花容器var $flakeContainer = $('#snowflake');// 随机六张图function getImagesName() {return snowflakeURl[[Math.floor(Math.random() * 7)]];}// 创建一个雪花元素function createSnowBox() {var url = getImagesName();return $('<div class="snowbox" />').css({'width': 41,'height': 41,'position': 'absolute','backgroundSize': 'cover','zIndex': 100000,'top': '-41px','backgroundImage': 'url(' + url + ')'}).addClass('snowRoll');}// 开始飘花setInterval(function() {// 运动的轨迹var startPositionLeft = Math.random() * visualWidth - 100,startOpacity = 1,endPositionTop = visualHeight - 40,endPositionLeft = startPositionLeft - 100 + Math.random() * 500,duration = visualHeight * 10 + Math.random() * 5000;// 随机透明度，不小于0.5var randomStart = Math.random();randomStart = randomStart < 0.5 ? startOpacity : randomStart;// 创建一个雪花var $flake = createSnowBox();// 设计起点位置$flake.css({left: startPositionLeft,opacity: randomStart});// 加入到容器$flakeContainer.append($flake);// 开始执行动画/* $flake.transition({top: endPositionTop,left: endPositionLeft,opacity: 0.7}, duration, 'ease-out', function() {$(this).remove() //结束后删除}); *///jquery 不引入其他js写法$flake.animate({top: endPositionTop,left: endPositionLeft,opacity: 0.7}, duration, 'linear', function() {$(this).remove() //结束后删除});}, 200);}snowflake()//执行函数})</script>
以上代码就是本文使用jquery实现网页背景花瓣随机飘落特效，希望大家喜欢。
文章来自：https://www.jb51.net/article/71166.htm
相关知识
利用JS代码实现HTML网页飘落樱花特效（附代码）
AE教程丨花瓣雨飘落特效+立体盒子教程
vue花瓣飘落/彩带撒落特效
WordPress 主题添加花瓣飘落特效
php花朵飘落特效,【新年气象】WordPress 主题添加花瓣飘落特效
怎么给视频添加花瓣特效？4种花瓣特效一键应用
html樱花飘落特效js
使用纯JavaScript实现全网页动态樱花飘落特效
ai绘画生成的桃花瓣特效：打造浪漫春日氛围，创意无限，美轮美奂效果展示
唯美玫瑰花瓣飘落结婚婚礼开场视频特效素材
网址: jquery+css3实现网页背景花瓣随机飘落特效【转】 https://m.huajiangbk.com/newsview665567.html
| 上一篇: 飘落的花瓣GIF动画 |
下一篇: 2023年描写花瓣飘落的唯美句子 |
