jq制作樱花飘落特效

今天看到一些网站有樱花飘落，雨滴，流星，孔明灯等在整个页面飘动的特效，经过查询资料自己也做了一个，分享给大家

思路：
1.创建一个樱花的元素即为樱花图片
2.产生的樱花图片不止一个应该为随机一张图片
3.控制这个樱花的运动轨迹，即樱花开始飘落位置和结束位置也是随机的
4.设置一个定时器每个一段时间调用这个樱花飘落的函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 定义页面的高度即樱花飘落范围的高度 */body {height: 5000px;}.snowRoll {position: absolute;opacity: 1;height: 80px;animation: mysakura 30s;}/* 给樱花容器添加一边飘落一边旋转的动画 */@keyframes mysakura {to {transform: rotate(1080deg);}}</style>
</head><body><script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script><script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script><script>// 需求：让樱花从页面上方随机产生并往左下运动并旋转// 樱花飘落部分// 设置数组存储不同花瓣的图片，// 等一下让图片随机定时随机产生一张// 可以选择自己喜欢的图片 比如雨滴 孔明灯 流星等let sakuraUrl = ['images/hb1.png','images/hb2.png','images/hb3.png',]//获取花瓣飘落范围的宽高visualWidth = $("body").width();visualHeight = $("body").height();//飘樱花 函数function sakuraflake() {// 创建一个樱花元素function createSakuraBox() {// 随机3张图0~3下标随机一张樱花图片let url = sakuraUrl[[Math.floor(Math.random() * 3)]];// 函数调用时返回这个樱花元素return $('<div class="snowbox" />').css({// 樱花的初始样式'position': 'absolute','width': 41,'height': 41,'backgroundSize': 'cover','zIndex': 99,'top': '-10px','opacity': 1,'backgroundImage': 'url(' + url + ')'}).addClass('snowRoll');}// 设置定时器开始掉落樱花setInterval(function () {// 控制樱花的运动的轨迹// 1.樱花开始的位置即left的值为随机产生// 2.樱花结束的位置通过计算开始的位置减去大概的值得到也是随机的// 3.樱花的运动时间也是通过计算飘落范围的高度大概需要多少秒得到// 以上数据都是可以根据自己喜欢的运动轨迹自行调整let startLeft = Math.random() * visualWidth,endTop = visualHeight,endLeft = startLeft - 4000 + Math.random() * 500,duration = visualHeight * 10 + Math.random() * 5000;// 创建一个樱花let $sakura = createSakuraBox();// 设计樱花的起点位置$sakura.css({left: startLeft,});// 添加樱花元素到页面中$('body').append($sakura);// 开始执行动画// 这里用到transition依赖jq的transit插件可自行下载$sakura.transition({top: endTop,left: endLeft,}, duration, 'linear', function () {$(this).remove() //动画结束后删除该元素});}, 1000);}// 调用樱花飘落函数sakuraflake()</script>
</body></html>

效果截图

jq制作樱花飘落特效相关推荐

OpenCV-Python图形图像处理：制作雪花飘落特效
☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 一.引言前几天有博友咨询,能否在视频中实现雪花飘落的效果,答案是肯定的.老猿前天简单构思 ...
HTML+JS樱花飘落特效+鼠标点击特效
目录: 效果: index.html 代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8&q ...
我在个人站点里添加了樱花飘落特效
樱花飘H5页面动画特效使用实例请自行参见我站江浒一只猫特效实际樱花有四种,自动按季节更替花瓣效果春天夏天秋天冬天使用说明我已经将js文件上传到了七牛和又拍云,可以公开引用食用方法 ...
java代码画樱花飘落_一行代码引入博客园樱花飘落特效
前言博客园作为面向大众的博客, 个性新颖可以博得一赞, 简约美观也不失阅读体验, 本文对樱花特效js进行了解读, 发现作者的设计确实秒不可言, 即使没有注释, 思路展示的也很清晰. 那就废话不多说, ...
html樱花飘落特效js
引入  <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js&q ...
JQ...CSS3爱心飘落特效
效果就是这样,直接贴代码了,需要的插件可以去bootcnd找,也可以自己从网上下载,改个路径就行了 <style>/*#wrap{相对定位,限制绝对定位position: relative ...
JS : 网页樱花飘落特效
JS <script> //妯辫姳var stop, staticx;var img = new Image();img.src = "data:image/png;base64 ...
OpenCV-Python 雪花飘落特效
来源:https://blog.csdn.net/LaoYuanPython/article/details/115298737 首先看一下目标效果: 素材准备 & 思路分析本次雪花来源于如 ...
博客园添加live2D看板娘和樱花飘落背景
写在前面本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落博客园文章目录写在前面本文使用 ...

jq制作樱花飘落特效

jq制作樱花飘落特效

jq制作樱花飘落特效相关推荐

最新文章

热门文章