这个天气，敢出门的都是抗日英雄
自打入夏以来，小面就独得太阳恩宠
小面天天求太阳，一定要雨露均沾哦
可是没有个鬼用
今天，小面就教各位同学
自己动手，人工降雪
1. 准备工作
一个雪花图片
一个记事本（或者IDE）
2. 目标
50行代码，解决人工降雪问题
3. 代码
分为以下几个步骤：
- 绘制背景
- 通过雪花图片，随机生成大小、初始位置不同的雪花元素
- 雪花飘落实现
- 掉在地上的雪花销毁
3.1 主界面
<!DOCTYPE html> <html> <head> <title>天太热，快下雪吧</title> <style> // TODO </style> <script> // TODO </script> </head> </html>
将背景换成黑色
body { background-color: #000000; }
3.2 灵魂代码
开始表演真正的技术
function runSnow() { let width = window.innerWidth; let height = window.innerHeight; let snow = document.createElement("div"); ////雪花图片大小介于5 ~ 55px size = Math.random()*50 + 5; snow.style.width = size + "px"; snow.style.height = size + "px"; snow.style.background = "url(images/snow.png) no-repeat"; snow.style.backgroundSize = '100% 100%'; snow.style.position = "fixed"; //透明度在 0.4 ~ 1.0 之间 snow.style.opacity = parseInt(Math.random()*6)/10 + 0.4; //随机生成雪花的横向位置 snow.style.left = Math.random()*width + 'px'; //雪花纵向位置固定从最顶上开始 snow.style.top = "0px"; document.body.appendChild(snow); //每30ms雪花下落一次 let speed=30; let timer = setInterval(function() { snow.style.top = parseInt(snow.style.top) + 10 + 'px'; if(parseInt(snow.style.top) >= height) { //当雪花到达底部后，清除 clearInterval(timer); snow.parentNode.removeChild(snow); } }, speed); } window.onload = function () { //每50ms生成一朵雪花 let fre=50; setInterval(function() { runSnow() }, fre); }
顺利完成
4. 运行效果
5. 增加亿点点变化
俗话说：UI好看靠图片凑，接下来看看能玩出哪些花样吧
5.1 更换背景
修改body的css，增加背景图，设置居中铺满全页
body { background-image: url(images/city.jpg); background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
档次明显上升了
5.2 更换掉落元素
5.2.1 鸡腿
5.2.2 红包
5.2.3 元宝
太开心了
又凉快，又好吃，又有钱
你学会了吗？
