1.代码

index.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- 设置网站图标favicon --><link rel="shortcut icon" href="favicon.ico" type="image/x-con" /><title>❄雪❄</title>
</head>
<style>*{ padding: 0;margin: 0; } /*所有元素的内边距,外边距都设置为0(HTML元素有自己默认的样式)*/body {width: 100%;height: 100%;background: url("bg.jpg") no-repeat;background-size: cover; /*保持图像的纵横比并将图像完全覆盖父容器*/overflow: hidden;       /*内容溢出就隐藏*/}
</style>
<body><div id="main"></div><script>const Scene = function(){};  //创建一个Scene对象//为这个对象添加一个具有一个参数的原型方法Scene.prototype.draw=function(snow){let fallingHeight = 0;                                   //雪花下落的高度let screenWidth = document.documentElement.clientWidth;  //获取浏览器窗口文档显示区域的宽度,不含滚动条let screenHeight = document.documentElement.clientHeight;//获取浏览器窗口文档显示区域的高度,不含滚动条snow.style.color="#fff";                                 //设置雪花颜色为白色snow.style.fontSize=12+Math.ceil(Math.random()*14)+'px'; //随机设置雪花大小snow.style.opacity=(Math.ceil(Math.random()*3)+7)/10+""; //随机设置雪花的透明度let startPos=Math.ceil(Math.random()*screenWidth);snow.style.left=startPos+'px';                           //随机设置雪花开始出现的水平位置setInterval(function(){//雪花每300ms下降10px,当下降距离大于screenHeight,雪花消失if(fallingHeight<screenHeight){snow.style.top=fallingHeight+'px';snow.style.left=startPos+Math.ceil(Math.random()*8)+'px'; //雪花向左随机移动一段距离fallingHeight+=10;}else{snow.style.display = 'none';}},300)}let main = document.getElementById('main')//用定时器每500ms创建一个雪花setInterval(function() {let snow = document.createElement('div') //创建divsnow.innerHTML ="❄"                      //div的内容设置为雪花图形snow.style.position='absolute'            //设置div为绝对定位main.append(snow)                         //把创建好的div放进main容器中let scene = new Scene()                   //创建Scene对象scene.draw(snow)                          //执行Scene对象的draw方法},500)</script>
</body>
</html>

同一目录下放两张图片：bg.jpg和favicon.ico

2.效果

原生JS实现雪花飘落的效果相关推荐

JS实现雪花飘落特效效果
1.概述: 以任意图片作为背景,在背景上添加雪花下落的特效效果,此处使用随机颜色.随机大小的彩色雪花实现. 2.效果实现功能: (1)雪花随机出现并随机消失: (2)雪花出现时大小随机: (3)雪花颜 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
Android 雪花飘落动画效果自定义View
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
Flutter 雪花飘落的效果-深夜创作
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
php实现页面雪花效果,CSS3如何实现雪花飘落的效果
通过CSS3中的animation属性来设置动画名称,动画时间.速度以及动画是否循环播放来实现雪花飘落的效果今天将要分享的是利用CSS3中的animation属性来实现雪花飘落的效果,具有一定的参考 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
JAVA实现雪花飘落动画效果
效果如下: 步骤: 一.在项目中创建一个继承JFrame类的MainFrame窗体类.一个继承Jlable类,并实现Runnable接口的自定义标签类SnowFlakeLable及一个背景面板类B ...

原生JS实现雪花飘落的效果

1.代码

2.效果

原生JS实现雪花飘落的效果相关推荐

最新文章

热门文章