HTML5+CSS3+JS实现满屏下雪效果

效果图：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"/><title>snow</title><style>.snow {position: absolute;background: url(img/snow.png);background-size: 100% 100%;margin: auto;/* 雪的样式 */}#container {position: fixed;width: 100%;height: 100%;top: 0;left: 0;/* 设置容器背景为黑色*/background: black;}#flower {/* 画布容器雪花都在这里面*/position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;}</style><script type="text/javascript">const list = [];//用来装雪花的集合//网页加载好之后会自动执行这个方法window.onload = function () {setInterval("run()", 10);//执行这个方法之后开始下雪//参数1:方法名    参数2:间隔时间单位ms//意思是每隔10ms执行一次run()方法}function newXue() { //创建一个雪花const v = {};//创建一个对象v.wh = Math.random() * 20 + 15;//wh代表雪花的宽高const number = window.innerWidth / (window.innerWidth + window.innerHeight);//number=概率的拼音;概率=浏览器宽度/(浏览器宽度+浏览器高度)//假设你浏览器是1920*1080的那number就是0.64//然后 雪花出现的位置有64%是在屏幕上边,36%是在屏幕右边if (Math.random() < number) {//在屏幕上方创建雪花 设置xy坐标v.x = Math.random() * window.innerWidth;v.y = -v.wh;} else {//在屏幕右方创建雪花 设置xy坐标v.x = window.innerWidth;v.y = Math.random() * window.innerHeight;}//  雪花的x轴移动速度v.sdx = Math.random() + 0.3;//    雪花的y轴移动速度v.sdy = Math.random() + 1;//  为每个雪花创建一个div,该div是用来显示雪花的v.div = document.createElement("div");//  设置div的类选择器v.div.className = "snow";//  设置div的位置v.div.style.width = v.wh + "px";v.div.style.height = v.wh + "px";//  把div添加到画布flower容器里document.getElementById("flower").appendChild(v.div);//  雪花添加到集合list.push(v);}const loader = 10;let load = 0;function run() {load++;//  load === loader时创建一个雪花if (load === loader) {//  该方法每10ms执行一次,每执行10次这个方法就创建一个雪花newXue();load = 0;}//  雪花的移动,遍历list集合for (let i = 0; i < list.length; i++) {let v = list[i];//  简单的坐标计算v.x -= v.sdx;v.y += v.sdy;v.div.style.left = v.x + "px";v.div.style.top = v.y + "px";//  雪花飘出可视范围之后删除雪花if (v.x + v.wh < 0 || v.y > window.innerHeight) {//  从list删除雪花list.splice(i, 1);//  删除divdocument.getElementById("flower").removeChild(v.div);}}}</script>
</head>
<body>
<div id="container"></div>
<div id="flower"></div>
</body>
</html>

素材：

项目下载地址：点我下载源码与素材

HTML5+CSS3+JS实现满屏下雪效果相关推荐

❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
纯html5+css3能写出什么惊人效果
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...

HTML5+CSS3+JS实现满屏下雪效果

效果图：

全部代码：

素材：

HTML5+CSS3+JS实现满屏下雪效果相关推荐

最新文章

热门文章