<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浪漫流星雨</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #0c0c1e, #1a1a3e, #2d1b4e);
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* 星星容器 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 星星 */
.star {
position: absolute;
width: 2px;
height: 2px;
background: #fff;
border-radius: 50%;
animation: twinkle 2s ease-in-out infinite;
}
/* 流星 */
.shooting-star {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(to right, transparent, #fff, transparent);
opacity: 0;
animation: shoot 3s linear infinite;
}
/* 流星头部 */
.shooting-star::before {
content: '';
position: absolute;
right: 0;
top: -2px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}
/* 闪烁动画 */
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* 流星划过动画 */
@keyframes shoot {
0% {
transform: translateX(0) translateY(0) rotate(-45deg);
opacity: 1;
}
70% {
opacity: 1;
}
100% {
transform: translateX(500px) translateY(500px) rotate(-45deg);
opacity: 0;
}
}
/* 文字样式 */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
z-index: 10;
}
.content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
letter-spacing: 0.5rem;
}
.content p {
font-size: 1.3rem;
opacity: 0.9;
letter-spacing: 0.3rem;
}
.content .btn {
margin-top: 2rem;
padding: 1rem 3rem;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
color: #fff;
font-size: 1.1rem;
cursor: pointer;
border-radius: 50px;
transition: all 0.3s ease;
letter-spacing: 0.2rem;
}
.content .btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #fff;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<div class="content">
<h1>✨ 星空 ✨</h1>
<p>陪你一起看流星雨</p>
<button class="btn">许个愿吧</button>
</div>
<script>
// 生成星星
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 2 + 's';
star.style.width = Math.random() * 2 + 1 + 'px';
star.style.height = star.style.width;
starsContainer.appendChild(star);
}
}
// 生成流星
function createShootingStars() {
const starsContainer = document.getElementById('stars');
const shootingCount = 5;
for (let i = 0; i < shootingCount; i++) {
const shooting = document.createElement('div');
shooting.className = 'shooting-star';
shooting.style.left = Math.random() * 70 + '%';
shooting.style.top = Math.random() * 30 + '%';
shooting.style.animationDelay = Math.random() * 5 + 's';
shooting.style.animationDuration = (Math.random() * 2 + 2) + 's';
starsContainer.appendChild(shooting);
}
}
createStars();
createShootingStars();
</script>
</body>
</html>实现原理
1. HTML结构
<div class="stars" id="stars">
<!-- 星星和流星通过JS动态生成 -->
</div>2. 星空背景
body {
background: linear-gradient(to bottom, #0c0c1e, #1a1a3e, #2d1b4e);
}使用深蓝色渐变，模拟夜空效果。
3. 星星样式
.star {
position: absolute;
width: 2px;
height: 2px;
background: #fff;
border-radius: 50%;
animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}关键点：
- border-radius: 50% - 把方块变成圆形
- animation: twinkle - 闪烁效果，让星星忽明忽暗
4. 流星样式
.shooting-star {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(to right, transparent, #fff, transparent);
animation: shoot 3s linear infinite;
}
.shooting-star::before {
content: '';
position: absolute;
right: 0;
top: -2px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}
@keyframes shoot {
0% {
transform: translateX(0) translateY(0) rotate(-45deg);
opacity: 1;
}
100% {
transform: translateX(500px) translateY(500px) rotate(-45deg);
opacity: 0;
}
}关键点：
- ::before 伪元素 - 制作流星头部的发光效果
- box-shadow - 发光特效
- rotate(-45deg) - 45度角划过天际
5. JavaScript生成
// 生成星星
function createStars() {
const starCount = 150; // 星星数量
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 2 + 's';
// ...
}
}
// 生成流星
function createShootingStars() {
const shootingCount = 5; // 流星数量
for (let i = 0; i < shootingCount; i++) {
// ...
shooting.style.animationDelay = Math.random() * 5 + 's';
}
}进阶：自定义效果
改变星空颜色
/* 紫色星空 */
background: linear-gradient(to bottom, #1a0a2e, #2d1b4e, #4a2c6a);
/* 蓝色星空 */
background: linear-gradient(to bottom, #0a1628, #1a3a5c, #2d5a7b);
/* 黑色星空 */
background: linear-gradient(to bottom, #000, #111, #222);调整星星数量
修改JS中的变量：
- 浪漫星空：starCount = 100
- 繁星点点：starCount = 200
- 稀疏星光：starCount = 50
调整流星频率
修改JS中的变量：
- 流星频繁：shootingCount = 10
- 偶尔一颗：shootingCount = 3
应用场景
- 🌙 个人主页 - 浪漫的首页背景
- 💕 表白页面 - 星空下的浪漫告白
- 🎂 生日祝福 - 许愿主题的生日页面
- 📱 H5活动页 - 吸引眼球的背景特效
完整代码
想要直接使用？复制上面的完整HTML代码，保存为 .html 文件即可！
评语 (0)