js实现雪花飘落效果
js实现雪花飘落效果
我们可以先看看效果
点这里 雪花
其实总的代码都不到 100 行,代码很少,因此 css 样式 和 js 代码我都放在一个 HTML 文件里面了
- 我们先看看主体的 HTML 代码
<body><div id="xh"></div>
</body>
html 的代码就只有一行
- 我们再看看 css 的样式
body {background-color: black;}#xh {position: relative;}.xue {position: absolute;display: inline-block;/* opacity: .7; */outline: none;border: none;animation: xuehua 5s infinite linear;}.xue:hover {cursor: pointer;animation-play-state: paused;opacity: 1;}@keyframes xuehua{from{opacity: 1;transform: translate(0, 0) rotate(0deg);}to{opacity: 0;transform: translate(0, 700px) rotateZ(720deg) rotateY(720deg) scale(1.5);}}
HTML 中唯一的 div#xh 给它设为 相对定位 relative ,便于它的子元素雪花定位。.xue 这个类设置为 绝对定位 absolute,便于改变它的 top 值,这个就不用多讲了吧。最主要的是 xuehua 这个动画,刚开始它的透明度设置为 1,慢慢地过渡到 0 ,位置也是从初始位置慢慢地往下移动,rotate 表示变换,边下落边变换。
- 现在我们来看看最主要的 js 代码。
<script type="text/javascript">var xh = document.getElementById("xh");/// 屏幕宽度var dWidth = document.body.scrollWidth;var dHeight = window.innerHeight;var setXH = setInterval(function(){production();}, 100);xh.style.height = dHeight;function production(){var t1 = document.createElement("div");/// left 和 top 最大值/// left 减掉 100 是为了不产生横行的滑动条var t1Left = Math.floor(Math.random() * dWidth) - 100;var t1Top = Math.floor(Math.random() * 10);t1.style.left = t1Left + "px";t1.style.top = t1Top + "px";t1.style.display = "inline-block";t1.innerText = "❉";t1.style.color = "white";t1.classList.add("xue");/// 将生成的雪花加入到 div 下面去xh.appendChild(t1);setInterval(function(){t1.remove();}, 5000);}</script>
在这里我大概的思路是这样的
1. 获取到一个容器(也就是HTML中的唯一一个div),保存到 xh 变量中
2. 获取屏幕的宽度(用于让雪花随机从不同的位置下落)
3. 设置一个计时器(用于产生雪花),我这里是每 100 毫秒产生一个 雪花
4. production 这个函数主要是产生雪花,里面的各种设置雪花的参数我就不一一介绍了。里面我用到了随机函数 random(),其作用就是让雪花下落的位置不同。然后参数设置好的雪花加入到div下面去(appendChild)
5. 最后我又设置了一个计时器,作用是每过 5000 毫秒(也就是 5s)就让移除一个雪花
雪花飘落的大致实现过程就是这样啦,要是哪位大佬有什么指导可以直接留言哦,很感谢你们提出的意见呢。大家有什么创意也可以留言哦,这也是提升的一种方法呢
哪个朋友想要源码可以留下邮箱,我直接发给你哦
最后祝大家身体健康~~~~
个人博客 http://www.sharekong.xyz 欢迎访问
QQ群 - 前端学习小组-578418670
不要人数,只要氛围
js实现雪花飘落效果相关推荐
- html5雪花飘落,使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: function start(){ var array=new Array(); var canvas=document.g ...
- HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果
HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 完整代码下载地址:HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 index.html <!DOCTYPE html& ...
- java实现物体下落效果_手撸一个物体下落的控件,实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果 感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
- python实现雪花飘落效果_python实现雪花飘落效果实例讲解及源码分享!
点击蓝字"python教程"关注我们哟! 前言 Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及 ...
- java飘落的雪花_[Java教程]实现雪花飘落效果
[Java教程]实现雪花飘落效果 0 2016-11-02 21:00:17 雪花飘落 body{background:#000;background: url(http://www.wallcoo. ...
- android雪花飘落效果,【OpenGL】Shader实例分析(七)- 雪花飘落效果
研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shader ...
- Android之雪花飘落效果
Android之雪花飘落效果 一:效果图 二:实现步骤 1:FallObject 下落物体 封装 2:自定义雪花飘View 3:xml布局 4:activity使用 三:最后 一:效果图 Androi ...
- HTML5 小练习2—仿华为官网(实现随机雪花飘落效果)
文章目录 一.界面展示 二.突出显示效果(当鼠标指向时) 1.广告部分动画 2.商品价格突出显示 3.导航栏文字突出显示 三.项目目录 四.CSS样式代码 1.雪花部分实现 五.页面代码 1.inde ...
- 用python画雪花飘落_python实现雪花飘落效果实例讲解
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
- python实现雪花动态图_python实现雪花飘落效果
在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教 ...
最新文章
- IDisposable实现的方法什么时候被执行的
- python sub 不区分大小写_Python网络爬虫入门篇
- 尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版(二)
- Java小青蛙跳台街,算法-青蛙跳台阶详解
- linux QT 结束当前进程_Qt编写控件属性设计器7-串口采集
- 实现光晕效果_马自达6车灯升级激光四透镜实现四近四远光
- Eclisp配置Maven(基础简易版)
- VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法
- 读《操作系统之哲学原理》的一点感想
- Cesium:修改初始相机默认位置以及HomeButton返回默认位置按钮方法
- PAT之STL:vector、set、map、stack、queue
- java获取汉字首字母
- HackerRank数据库题目练习(2)
- SiteSucker Mac版(整站下载工具)中文版
- 基于android的短信收发,android 短信接收短信 与发送短信源码
- 其他 | 狼人杀入门
- 研究日记:虚拟歌姬自动调教之歌曲音频切割的问题
- Python中的循环遍历列表
- ITU-T E.800
- tiktok广告推广怎么能精准展现?什么行业适合在tiktok投放广告?
热门文章
- 路由器与无线网如何连接到服务器,两个路由器无线连接怎么设置_如何将两个路由器无线连接-192路由网...
- C++查詢wry.dat中的IP地址信息
- 031-JVM-合并写(write combining)
- 企业逼迫员工离职,员工可以收集哪些证据进行维权?
- 微信小程序制作背景图片
- python文件重命名加日期_Python文件创建日期和Critiqu的重命名请求
- 聚合数据API接口调用方法
- ctf镜子里面的世界_一个小编姐姐的CTF入坑之旅
- 微信为什么不禁拼多多?诱导分享到底怎么判
- 柴静穹顶之下 感想