本文介绍了一种使用HTML和JavaScript实现雪花飘落动画的方法。通过动态创建和移动多个雪花图片来模拟下雪的效果，并设置了背景颜色及页面尺寸适应等细节。
雪花飘落动画效果
雪花素材：
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雪花</title>
<style>
html {
height: 100%;
}
body {
margin: 0px;
background-color: black;
height: 100%;
/* 隐藏超出屏幕部分 */
overflow: hidden;
}
img {
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<script>
function showSnow() {
// 获取img标签元素
var img = document.createElement('img')
// 把img的src属性设置为flake.png
img.src = 'snow.png';
// document.body指body标签，appendChild追加子标签img
document.body.appendChild(img)
// 获取客户端的宽和高
var width = document.body.clientWidth
var height = document.body.clientHeight
var l = Math.random() * width;
var t = Math.random() * height;
img.style.position = 'absolute';
img.style.top = t + 'px';
img.style.left = l + 'px';
// 设置雪花大小
// img.style.width = Math.random() * 50 + 'px';
img.style.transform = 'scale(' + Math.random() / 2 + ')';
console.log(height);
console.log(t);
function snowDown() {
l += Math.random() * 10;
t += Math.random() * 10;
if (l > width) {
l = -100;
}
if (t > height) {
t = -100;
}
img.style.left = l + 'px';
img.style.top = t + 'px';
}
// 每隔50毫秒执行一次snowDown移动方法
setInterval(snowDown, 50);
}
// for循环showSnow(),创建50个雪花
for (var i = 0; i < 50; i++) {
showSnow();
}
</script>
</body>
</html>
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
