HTML5科幻空间背景动画特效

原创已于 2025-06-27 11:28:22 修改 · 474 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-14 13:22:07 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5科幻空间背景动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}

.space {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}

.stars {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at center,
rgba(255,255,255,0.1) 0%,
rgba(0,0,0,0) 70%),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.5"/></svg>');
background-size: 100% 100%, 2px 2px;
animation: star-move 100s linear infinite;
}

@keyframes star-move {
0% { background-position: 0 0, 0 0; }
100% { background-position: 0 0, 200px 200px; }
}

.grid {
position: absolute;
width: 200%;
height: 200%;
background:
linear-gradient(rgba(0, 150, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 150, 255, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
transform: translate(-25%, -25%) rotateX(75deg);
animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
0% { transform: translate(-25%, -25%) rotateX(75deg); }
100% { transform: translate(-25%, -75%) rotateX(75deg); }
}

.planet {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
#1a1a2e, #16213e, #0f3460, #533483);
box-shadow:
0 0 50px rgba(83, 52, 131, 0.8),
inset 0 0 100px rgba(0, 150, 255, 0.3);
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
animation: planet-rotate 60s linear infinite;
}

@keyframes planet-rotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.rings {
position: absolute;
width: 500px;
height: 100px;
border-radius: 50%;
border: 2px solid rgba(0, 150, 255, 0.3);
top: 50%;
left: 20%;
transform: translate(-50%, -50%) rotateX(75deg);
animation: rings-rotate 30s linear infinite;
}

.rings::before, .rings::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 150, 255, 0.3);
top: 0;
left: 0;
}

.rings::before {
transform: rotate(60deg);
}

.rings::after {
transform: rotate(120deg);
}

@keyframes rings-rotate {
0% { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); }
100% { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); }
}

.ship {
position: absolute;
width: 100px;
height: 30px;
background: rgba(0, 150, 255, 0.5);
border-radius: 50% 50% 0 0;
top: 50%;
left: 70%;
transform: translate(-50%, -50%) rotate(-45deg);
animation: ship-move 15s ease-in-out infinite alternate;
box-shadow:
0 0 20px rgba(0, 150, 255, 0.8),
inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.ship::before {
content: '';
position: absolute;
width: 50px;
height: 10px;
background: rgba(255, 100, 100, 0.8);
border-radius: 5px;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 15px rgba(255, 100, 100, 0.8);
}

@keyframes ship-move {
0% { transform: translate(-50%, -50%) rotate(-45deg) translateY(0); }
100% { transform: translate(-50%, -50%) rotate(-45deg) translateY(-100px); }
}

.title {
position: relative;
color: #fff;
font-size: 5vw;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
z-index: 100;
animation: title-glow 3s ease-in-out infinite alternate;
}

@keyframes title-glow {
0% { text-shadow: 0 0 10px rgba(0, 150, 255, 0.8); }
100% { text-shadow: 0 0 20px rgba(0, 150, 255, 1), 0 0 30px rgba(100, 200, 255, 0.5); }
}

.hidden-link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.3);
font-size: 12px;
text-decoration: none;
z-index: 100;
}
</style>
</head>
<body>
<div class="space">
<div class="stars"></div>
<div class="grid"></div>
<div class="planet"></div>
<div class="rings"></div>
<div class="ship"></div>
<h1 class="title">太空探索</h1>
</div>

</body>
</html>