我来为你创建一个炫酷的动态火箭HTML5网页,包含火箭发射动画、星空背景和交互控制。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">动态火箭发射</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: linear-gradient(to bottom, #0a0a2e 0%, #16213e 50%, #1a1a3a 100%);
font-family: 'Arial', sans-serif;
height: 100vh;
position: relative;
}
/* 星空背景 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* 火箭容器 */
.rocket-container {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
transition: all 0.3s ease;
}
/* 火箭主体 */
.rocket {
width: 60px;
height: 150px;
position: relative;
animation: idle 2s ease-in-out infinite;
}
@keyframes idle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* 火箭头部 */
.rocket-head {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid #ff6b6b;
position: absolute;
top: 0;
left: 0;
}
/* 火箭身体 */
.rocket-body {
width: 40px;
height: 60px;
background: linear-gradient(to bottom, #4ecdc4, #44a3aa);
margin: 0 auto;
position: absolute;
top: 60px;
left: 10px;
border-radius: 10px 10px 5px 5px;
box-shadow: 0 0 20px rgba(78, 205, 196, 0.5);
}
/* 火箭窗户 */
.rocket-window {
width: 20px;
height: 20px;
background: #87ceeb;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
/* 火箭尾翼 */
.rocket-fin {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
}
.rocket-fin.left {
border-width: 0 0 30px 20px;
border-color: transparent transparent #ff6b6b transparent;
left: 0;
bottom: 0;
}
.rocket-fin.right {
border-width: 0 20px 30px 0;
border-color: transparent #ff6b6b transparent transparent;
right: 0;
bottom: 0;
}
/* 火焰效果 */
.flames {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 60px;
opacity: 0;
transition: opacity 0.3s;
}
.flames.active {
opacity: 1;
animation: flicker 0.1s infinite alternate;
}
@keyframes flicker {
0% { transform: translateX(-50%) scaleY(1); }
100% { transform: translateX(-50%) scaleY(1.1); }
}
.flame {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 40px;
background: radial-gradient(ellipse at center, #ffeb3b 0%, #ff9800 40%, #ff5722 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
filter: blur(2px);
}
.flame::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 30px;
background: radial-gradient(ellipse at center, #fff 0%, #ffeb3b 50%, transparent 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* 控制面板 */
.control-panel {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 100;
}
.control-btn {
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
backdrop-filter: blur(10px);
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}
.control-btn:active {
transform: translateY(0);
}
/* 状态显示 */
.status {
position: fixed;
top: 20px;
left: 20px;
color: white;
font-size: 18px;
background: rgba(0, 0, 0, 0.3);
padding: 15px 25px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
/* 云朵效果 */
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 100px;
opacity: 0.4;
}
.cloud::before,
.cloud::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 100px;
}
.cloud1 {
width: 100px;
height: 40px;
top: 20%;
animation: drift 20s infinite;
}
.cloud1::before {
width: 50px;
height: 50px;
top: -25px;
left: 10px;
}
.cloud1::after {
width: 60px;
height: 40px;
top: -15px;
right: 10px;
}
@keyframes drift {
0% { left: -150px; }
100% { left: 100%; }
}
/* 烟花效果 */
.firework {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
opacity: 0;
}
@keyframes explode {
0% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(20);
}
}
</style>
</head>
<body>
<!-- 星空背景 -->
<div class="stars" id="stars"></div>
<!-- 云朵 -->
<div class="cloud cloud1"></div>
<!-- 状态显示 -->
<div class="status">
<div>状态: <span id="status">准备就绪</span></div>
<div>高度: <span id="altitude">0</span> 米</div>
</div>
<!-- 火箭 -->
<div class="rocket-container" id="rocketContainer">
<div class="rocket" id="rocket">
<div class="rocket-head"></div>
<div class="rocket-body">
<div class="rocket-window"></div>
</div>
<div class="rocket-fin left"></div>
<div class="rocket-fin right"></div>
<div class="flames" id="flames">
<div class="flame"></div>
</div>
</div>
</div>
<!-- 控制面板 -->
<div class="control-panel">
<button class="control-btn" id="launchBtn">发射火箭</button>
<button class="control-btn" id="resetBtn">重置</button>
<button class="control-btn" id="fireworkBtn">发射烟花</button>
</div>
<script>
// 创建星空
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.width = Math.random() * 3 + 'px';
star.style.height = star.style.width;
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 3 + 's';
starsContainer.appendChild(star);
}
}
// 火箭控制
class RocketController {
constructor() {
this.rocket = document.getElementById('rocket');
this.rocketContainer = document.getElementById('rocketContainer');
this.flames = document.getElementById('flames');
this.launchBtn = document.getElementById('launchBtn');
this.resetBtn = document.getElementById('resetBtn');
this.fireworkBtn = document.getElementById('fireworkBtn');
this.status = document.getElementById('status');
this.altitude = document.getElementById('altitude');
this.isLaunching = false;
this.currentAltitude = 0;
this.maxAltitude = window.innerHeight - 200;
this.init();
}
init() {
this.launchBtn.addEventListener('click', () => this.launch());
this.resetBtn.addEventListener('click', () => this.reset());
this.fireworkBtn.addEventListener('click', () => this.launchFirework());
}
launch() {
if (this.isLaunching) return;
this.isLaunching = true;
this.status.textContent = '发射中...';
this.flames.classList.add('active');
// 火箭发射动画
let position = 0;
const launchInterval = setInterval(() => {
position += 5;
this.rocketContainer.style.bottom = (50 + position) + 'px';
this.currentAltitude = position;
this.altitude.textContent = Math.floor(position * 10);
// 逐渐加速
if (position > 100) {
clearInterval(launchInterval);
this.fly();
}
}, 20);
}
fly() {
const flyInterval = setInterval(() => {
const currentBottom = parseInt(this.rocketContainer.style.bottom);
if (currentBottom < this.maxAltitude) {
this.rocketContainer.style.bottom = (currentBottom + 8) + 'px';
this.currentAltitude += 8;
this.altitude.textContent = Math.floor(this.currentAltitude * 10);
// 添加旋转效果
const rotation = Math.sin(this.currentAltitude * 0.05) * 10;
this.rocket.style.transform = `rotate(${rotation}deg)`;
} else {
clearInterval(flyInterval);
this.explode();
}
}, 20);
}
explode() {
this.status.textContent = '到达太空！';
this.flames.classList.remove('active');
// 创建爆炸效果
for (let i = 0; i < 50; i++) {
setTimeout(() => {
this.createParticle();
}, i * 20);
}
setTimeout(() => {
this.status.textContent = '任务完成';
}, 2000);
}
createParticle() {
const particle = document.createElement('div');
particle.className = 'firework';
particle.style.left = this.rocketContainer.style.left;
particle.style.bottom = this.rocketContainer.style.bottom;
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6ab04c'];
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
const angle = Math.random() * Math.PI * 2;
const velocity = Math.random() * 200 + 100;
const vx = Math.cos(angle) * velocity;
const vy = Math.sin(angle) * velocity;
document.body.appendChild(particle);
let x = 0, y = 0;
const animateParticle = setInterval(() => {
x += vx * 0.02;
y += vy * 0.02;
particle.style.transform = `translate(${x}px, ${-y}px)`;
particle.style.opacity = 1 - Math.abs(y) / 300;
if (particle.style.opacity <= 0) {
clearInterval(animateParticle);
particle.remove();
}
}, 20);
}
reset() {
this.isLaunching = false;
this.currentAltitude = 0;
this.rocketContainer.style.bottom = '50px';
this.rocket.style.transform = 'rotate(0deg)';
this.flames.classList.remove('active');
this.status.textContent = '准备就绪';
this.altitude.textContent = '0';
}
launchFirework() {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.5;
for (let i = 0; i < 30; i++) {
setTimeout(() => {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = x + 'px';
firework.style.top = y + 'px';
firework.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
document.body.appendChild(firework);
const angle = (Math.PI * 2 * i) / 30;
const velocity = 150;
const vx = Math.cos(angle) * velocity;
const vy = Math.sin(angle) * velocity;
let px = 0, py = 0;
const animate = setInterval(() => {
px += vx * 0.02;
py += vy * 0.02;
firework.style.transform = `translate(${px}px, ${py}px)`;
firework.style.opacity = 1 - Math.sqrt(px * px + py * py) / 200;
if (firework.style.opacity <= 0) {
clearInterval(animate);
firework.remove();
}
}, 20);
}, i * 10);
}
}
}
// 初始化
createStars();
const rocketController = new RocketController();
</script>
</body>
</html>
这个动态火箭网页包含了以下特性：
-
视觉效果：
- 渐变夜空背景
- 闪烁的星星
- 飘动的云朵
- 精美的火箭设计（头部、身体、窗户、尾翼）
-
动画效果：
- 火箭待机时的轻微浮动
- 发射时的火焰喷射效果
- 飞行时的旋转和加速
- 到达太空时的粒子爆炸效果
- 烟花发射功能
-
交互功能：
- 发射火箭按钮
- 重置按钮
- 发射烟花按钮
- 实时状态和高度显示
-
响应式设计：
- 适配不同屏幕尺寸
- 流畅的动画过渡
- 毛玻璃效果的控制面板
你可以点击"发射火箭"观看完整的发射过程，或者点击"发射烟花"欣赏绚丽的烟花效果，整个页面采用纯CSS和JavaScript实现，无需任何外部依赖。
