夜幕低垂，星星点点。一场浪漫的流星雨即将降临，你是否想尝试在网页上呈现出这样的美景呢？接下来，我们就来分享一段浪漫流星雨代码html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浪漫流星雨</title>
<style>
body {
background-color: #0c1d3f;
}
.stars {
width: 2px;
height: 2px;
background-color: white;
position: absolute;
border-radius: 50%;
}
.meteor {
width: 20px;
height: 60px;
background-color: white;
position: absolute;
transform: rotate(-45deg);
transform-origin: top right;
border-radius: 50%;
animation: meteor 1s ease-out infinite;
}
.meteor:before, .meteor:after {
content: '';
width: 20px;
height: 20px;
background-color: white;
position: absolute;
border-radius: 50%;
transform: rotate(45deg);
transform-origin: top right;
}
.meteor:before {
top: -28px;
left: 22px;
}
.meteor:after {
top: -16px;
left: 0;
}
@media (max-width: 768px) {
.meteor {
width: 10px;
height: 30px;
}
.meteor:before {
top: -14px;
left: 11px;
}
.meteor:after {
top: -8px;
}
}
@keyframes meteor {
0% {
left: -20%;
opacity: 1;
}
50% {
left: 120%;
opacity: 0;
}
100% {
left: 120%;
opacity: 0;
}
}
</style>
</head>
<body>
<script>
setInterval(createStar, 100);
function createStar() {
let star = document.createElement('div');
star.className = 'stars';
document.body.appendChild(star);
let top = Math.floor(Math.random() * window.innerHeight);
let left = Math.floor(Math.random() * window.innerWidth);
let deg = Math.floor(Math.random() * 360);
star.style.top = top + 'px';
star.style.left = left + 'px';
star.style.transform = 'rotate(' + deg + 'deg)';
setTimeout(function() {
star.remove();
}, 2000);
}
</script>
<div class="meteor"></div>
</body>
</html>
我们通过添加星星的样式和流星的动态效果，再结合定时器控制星星的生成和销毁，最终呈现出了一场美轮美奂的浪漫流星雨。
如果你也想在你的网页中添加这样的奇妙效果，不妨来试试上方的代码吧。