<!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>
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
}
i {
position: absolute;
top: 0;
transition: all 0.3s;
color: yellow;
}
html,
body {
width: 100%;
height: 100%;
background-color: black;
}
section {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<section>
</section>
</body>
<script>
var sec = document.querySelector('section');
var bool = true;
function a() {
var i = document.createElement('i');
i.className = 'fa fa-star fa-spin';
//不用图标可以用这个代替
// i.innerHTML = '✦';
sec.appendChild(i);
var left = Math.floor(Math.random() * sec.offsetWidth - 400);
i.style.left = left + 'px';
// console.log(left);
var top = 0;
var slant = left;
function c() {
i.style.top = top + 'px'; top += 10;
i.style.left = slant + 'px'; slant += 10;
if (top >= sec.offsetHeight || slant >= sec.offsetWidth) {
// top = 0;
i.remove();
}
}
// 计时器
setInterval(c, 80);
}
// 计时器
setInterval(a, 800);
</script>
</html>
