CSS+JS 最简单的流星雨
这里流星用的是图片
思路:
1.通过CSS动画将流星进行 显示+位移+隐藏
2.通过JS将流星随机到网页的位置,动画播放完成后清除流星避免网页卡顿。
<!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>
html,
body {
margin: 0;
height: 100%;
}
/* 星空背景*/
.background {
height: 100%;
width: 100%;
background: url('images/星空.jpg')no-repeat;
background-size: 100%;
background-position: top left;
background-position: 0px 0px;
background-position: 100% 100%;
position: relative;
overflow: hidden;
}
/* 流星样式 */
.meteor {
position: absolute;
animation: 2s myMeteor;
/* animation-iteration-count: infinite; */
opacity: 0;
}
/* 流星动画 按百分比帧设定属性 */
@keyframes myMeteor {
0% {
opacity: 0;
transform: translate(100%, -100%);
}
25% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
transform: translate(-50%, 50%);
}
}
</style>
</head>
<body>
<div class="background"></div>
</body>
<script>
var bg = document.querySelector('.background')
// 每隔2000毫秒创建一个流星
var timer = setInterval(createMeteor, 2000)
// 创建流星
function createMeteor() {
// 创建图片
let img = document.createElement('img');
// 设置图片
img.src = 'images/流星.png'
// 设置类&动画
img.className = 'meteor'
// 设置位置
let left = parseInt(Math.random() * 1000) % 100
let top = parseInt(Math.random() * 1000) % 100
img.style.left = left + '%'
img.style.top = top + '%'
// div下添加流星
bg.appendChild(img)
// 动画完成后清除流星
setTimeout(() => {
bg.removeChild(img)
}, 3500)
}
</script>
</html>