js实现雪花效果(超简单)

打个广告，最底下的公众号，可以每天领外卖红包、打车优惠券还有96折充值电费等，需要的可以关注一下哦

使用js实现雪花飘落效果，话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>snow</title><style>body,html{margin: 0;padding: 0;overflow: hidden;height: 100%;background: black;}.snow{background: white;position: absolute;width: 20px;height: 20px;border-radius: 50%;}</style></head>
<body><script>//获取屏幕宽高var windowWidth = window.screen.width;var windowHeight = window.screen.height;//创建雪花function createSnow(){var left = 0;var top = 0;//定义一个初始化随机数,使雪花在屏幕中var left_random = Math.random() * windowWidth;var top_random = Math.random()* windowHeight;var div = document.createElement('div');div.className = 'snow';div.style.transform = 'scale('+(Math.random())+')'document.body.appendChild(div);//雪花飘落setInterval(function () {div.style.left = left_random + left +'px';div.style.top = top_random + top +'px'left += 0.2;top += 0.2;//如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部if(left_random + left >= windowWidth){left_random = Math.random();left = 0;}if(top_random + top >= windowHeight){top_random = Math.random();top = 0;}},10)}for(var i = 0 ; i < 200 ; i++){createSnow()}</script>
</body>
</html>

实现逻辑其实很简单，动态创建若干个div设置其样式变成雪花，通过setInterval定时器控制雪花移动，当雪花跑到屏幕外面重新让雪花的left或者top为0，使雪花重新回到最左或者最上面的位置，从而实现。

效果预览：

代码优化：

看了一年前写的博客发现这个雪花效果还有优化的地方，由于left和top都会导致布局repaint，建议用translate代替，可以很明显的提高性能

然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有96折充值电费等

js实现雪花效果(超简单)相关推荐

dw在php图片滑动切换效果,超简单的图片左右切换滑动
网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能效果预览 ...
js网页雪花效果jquery插件
1,使用前先导入jquery类库 2,导入雪花特效js类库 jq.snow.min.js 3,初始化代码 <script>$(function(){$.fn.snow({minSize : ...
关于js实现分页效果的简单代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
批处理操作mysql_超简单使用批处理（batch）操作数据库
超简单使用批处理(batch)操作数据库批处理(batch)是什么批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...
js模拟制作超逼真的雪花效果
<春雪> 唐·东方虬春雪满空来,触处似花开. 不知园里树,若个是真梅. <红林擒近·寿词·满路花> 宋·陈允平三万六千顷,玉壶天地寒.庾岭封的皪,淇园折琅.漠漠梨花烂漫,纷 ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
python打字机效果_打字效果动画的4种实现方法(超简单)
方法一(纯css实现): html代码: 打字动画打字动画打字动画 css样式: .typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
简单JS实现走马灯效果的文字(无需jQuery)
效果类似:(抱歉,图片是静态的) 写一段html,需要走马灯上下跳动的内容,但每次只显示一行: <hr size="0" align="center" s ...

js实现雪花效果(超简单)

打个广告，最底下的公众号，可以每天领外卖红包、打车优惠券还有96折充值电费等，需要的可以关注一下哦

使用js实现雪花飘落效果，话不多说直接上代码

实现逻辑其实很简单，动态创建若干个div设置其样式变成雪花，通过setInterval定时器控制雪花移动，当雪花跑到屏幕外面重新让雪花的left或者top为0，使雪花重新回到最左或者最上面的位置，从而实现。

效果预览：

代码优化：

看了一年前写的博客发现这个雪花效果还有优化的地方，由于left和top都会导致布局repaint，建议用translate代替，可以很明显的提高性能

然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有96折充值电费等

js实现雪花效果(超简单)相关推荐

最新文章

热门文章