关于使用dom操作完成雪花下落的实现
关于实现雪花下落的实现
实现代码段如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪花飘落</title>
<style>
@keyframes changeColor {
from {
opacity: .5;
}
to {
opacity: 1;
}
}
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
background-size:cover;
background-image: url(./圣诞背景图.jpg);
background-position: center center;
overflow: hidden;
}
p {
position: absolute;
top: 50px;
color: #fff;
text-align: center;
text-shadow: 0 0 3px ;
animation: changeColor .5s linear infinite;
}
</style>
</head>
<body>
<!-- <p>*</p> -->
</body>
<script>
var body = document.querySelector("body");
var timer = null;
timer = setInterval(function(){
if (rand(0,100)<10) {
createSnow();
}
snowMove();
},30)
function createSnow() {
var p = document.createElement("p");
p.innerHTML = "❄";
var fs = rand(10,60);
p.style.fontSize = fs + 'px';
p.style.width = fs + 'px';
p.style.height = fs + 'px';
var l = rand(0,window.innerWidth - fs);
p.style.left = l + 'px';
p.speedY = rand(3,10)
p.style.color = randColor();
body.appendChild(p);
}
function snowMove() {
var snows = document.querySelectorAll('p');
for(var i = 0;i<snows.length;i++) {
snows[i].style.top = snows[i].offsetTop + snows[i].speedY + 'px';
if(snows[i].offsetTop>window.innerHeight) {
body.removeChild(snows[i]);
i--;
}
}
}
function rand(min,max) {
return Math.round(Math.random()*(max-min)+min);
}
function randColor() {
return `rgb(${rand(0, 255)},${rand(0, 255)},${rand(0, 255)})`;
}
</script>
</html>
效果图如下