css制作火箭
使用CSS制作火箭动画
通过CSS的动画和变形属性可以创建一个简单的火箭动画效果。以下是一个完整的实现方法：
HTML结构
<div class="rocket">
<div class="body"></div>
<div class="window"></div>
<div class="fin left"></div>
<div class="fin right"></div>
<div class="fire"></div>
</div>CSS样式
.rocket {
position: relative;
width: 100px;
height: 200px;
margin: 100px auto;
animation: launch 3s infinite;
}
.body {
width: 50px;
height: 150px;
background: linear-gradient(to right, #ff5e00, #ff9966);
border-radius: 10px 10px 0 0;
position: absolute;
bottom: 0;
left: 25px;
}
.window {
width: 20px;
height: 20px;
background: #87CEEB;
border-radius: 50%;
position: absolute;
top: 40px;
left: 40px;
}
.fin {
width: 0;
height: 0;
position: absolute;
bottom: 20px;
}
.fin.left {
border-left: 15px solid transparent;
border-right: 15px solid #ff5e00;
border-bottom: 30px solid #ff5e00;
left: 10px;
}
.fin.right {
border-left: 15px solid #ff5e00;
border-right: 15px solid transparent;
border-bottom: 30px solid #ff5e00;
right: 10px;
}
.fire {
width: 30px;
height: 60px;
background: linear-gradient(to top, #ff0000, #ff9900);
border-radius: 0 0 15px 15px;
position: absolute;
bottom: -60px;
left: 35px;
animation: flicker 0.5s infinite alternate;
}
@keyframes launch {
0% { transform: translateY(0); }
50% { transform: translateY(-100px); }
100% { transform: translateY(0); }
}
@keyframes flicker {
0% { opacity: 0.8; height: 60px; }
100% { opacity: 1; height: 70px; }
}添加3D效果
要使火箭看起来更立体，可以添加CSS 3D变换：
.rocket {
transform-style: preserve-3d;
perspective: 1000px;
}
.body {
transform: rotateY(15deg);
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}响应式调整
为了让火箭在不同屏幕尺寸下都能正常显示：
@media (max-width: 600px) {
.rocket {
transform: scale(0.7);
}
}这个实现包含了火箭的基本形状、火焰动画和起飞动画效果。通过调整CSS属性可以改变火箭的颜色、大小和动画速度。火焰使用渐变色和闪烁动画增强真实感，而火箭主体则通过简单的上下移动模拟发射效果。
