2022,有生之年的最热一年
这个天气,敢出门的都是抗日英雄
自打入夏以来,小面就独得太阳恩宠
小面天天求太阳,一定要雨露均沾哦
可是没有个鬼用
今天,小面就教各位同学
自己动手,人工降雪
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 元宝
太开心了
又凉快,又好吃,又有钱
你学会了吗?
正文完