javascript之雪花特效

css代码块

      * {padding: 0;margin: 0;}body {height: 100vh;}.iconfont {position: absolute;}

js代码部分

<script>// 随机颜色function color() {var r = Math.round(Math.random() * 255);var g = Math.round(Math.random() * 255);var b = Math.round(Math.random() * 255);return `rgb(${r},${g},${b})`;}// 创建一个雪花function snowDown() {var posY = -60, // 雪花的topspeed = Math.random() * 10 + 5, // 雪花下落的速度scale = Math.round(Math.random()), //雪花缩放的大小// 因为用的是字体，font-size最小是12px，所以对雪花进行缩放控制大小deg = Math.round(Math.random() * 360); // 雪花旋转的角度//创建一个雪花var snow = document.createElement("span");snow.classList.add("iconfont", "icon-xuehua11");// 雪花的顶部位移topsnow.style.top = posY + "px";// 调用随机颜色函数赋值给雪花的颜色// snow.style.color = color();snow.style.color = "skyblue";// 雪花缩放大小snow.style.transform = "scale(" + scale + ")";// 雪花出现的位置，左偏移leftsnow.style.left = Math.round(Math.random() * document.body.scrollWidth) - 60 + "px";// 在body中插入雪花document.body.appendChild(snow);// 每隔0.05s雪花向下移动并放大var timer = setInterval(function () {posY += speed;deg += 5;scale += speed * 0.005;// snow.style.transform = "rotate(" + deg + "deg)";snow.style.top = posY + "px";// 雪花缩放和旋转要拼在一起写，分开写会被覆盖snow.style.transform = "scale(" + scale + ") rotate(" + deg + "deg)";// 当雪花超出屏幕时雪花消失if (posY > document.body.scrollHeight - 60) {clearInterval(timer);snow.remove();}}, 50)}// 每0.05s创建一个雪花setInterval(snowDown, 50)</script>

效果图

javascript之雪花特效相关推荐

php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript 实现雪花效果
JavaScript 实现雪花效果一.实现功能二.展示 1.代码展示 2.效果展示总结一.实现功能 (1)添加一个背景图片: (2)用js语言实现雪花飘落效果: (3)使用setInterva ...
冬天到了，分享两款雪花特效代码
冬天到了,或者圣诞节到了,很多网站会用到雪花特效, 今天我就分享两款觉得比较好的雪花js特效代码给大家, 当然不是小弟原创的,得感谢原创作者的无私奉献一.下雪特效代码① 该特效的雪花是有雪花的八角形 ...
下雪html特效代码,JavaScript 实现下雪特效的示例代码
直接上代码下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...
Android实现雪花特效自定义view
一.前言这个冬天,老家一直没有下雨, 正好圣诞节,就想着制作一个下雪的特效. 圣诞祝福:平安夜,舞翩阡.雪花飘,飞满天.心与心,永相伴. 圣诞节是传统的宗教节日,对于基督徒,那是庆祝耶稣的诞生,纪 ...
【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
苹果4如何添加时间插件_苹果手机:插件Snoverlay：给越狱iPhone添加雪花特效
如今使用IT数码设备的小伙伴们是越来越多了,那么IT数码设备当中是有很多知识的,这些知识很多小伙伴一般都是不知道的,就好比最近就有很多小伙伴们想要知道插件Snoverlay:给越狱iPhone添加雪花 ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...
html js相册样式,JavaScript+CSS相册特效实例代码
下面小编就为大家带来一篇JavaScript+CSS相册特效实例代码.小编觉得挺不错的,现在就分享JavaScript+css的源码给大家,也给大家做个参考.对JavaScript和css制作相册感兴 ...

javascript之雪花特效

javascript之雪花特效相关推荐

最新文章

热门文章