使用CSS3+SVG实现点火发射的动画# 使用CSS3+SVG实现点火发射的动画点火发射动画是一种常见的动画效果，通

使用CSS3+SVG实现点火发射的动画

点火发射动画是一种常见的动画效果，通常用于展示火箭或其他发射物体的升空过程。通过结合CSS3和SVG，我们可以创建一个简单而生动的点火发射动画。以下是实现这一效果的步骤和代码示例。

1. 准备SVG图形

首先，我们需要创建一个火箭的SVG图形。这里我们使用简单的形状来表示火箭和火焰。

<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
  <g id="rocket">
    <!-- 火箭主体 -->
    <rect x="90" y="100" width="20" height="100" fill="gray" />
    <!-- 火箭顶部 -->
    <polygon points="80,100 120,100 100,60" fill="red" />
    <!-- 火焰 -->
    <g id="flame" opacity="0">
      <polygon points="90,200 110,200 100,230" fill="orange" />
      <polygon points="95,230 105,230 100,260" fill="yellow" />
    </g>
  </g>
</svg>

2. 添加CSS样式

接下来，我们为SVG元素添加CSS样式，以实现动画效果。

<style>
  #rocket {
    transform-origin: center bottom; /* 设置旋转中心 */
    animation: launch 3s ease-in-out forwards; /* 设置发射动画 */
  }

  @keyframes launch {
    0% {
      transform: translateY(0) rotate(0deg); /* 初始位置 */
    }
    50% {
      transform: translateY(-150px) rotate(10deg); /* 上升到一定高度并旋转 */
    }
    100% {
      transform: translateY(-300px) rotate(0deg); /* 完全飞出视口 */
    }
  }

  #flame {
    animation: flame-animation 0.5s infinite alternate; /* 火焰动画 */
  }

  @keyframes flame-animation {
    0% {
      opacity: 1; /* 完全可见 */
    }
    100% {
      opacity: 0; /* 渐隐 */
    }
  }
</style>

3. 触发动画

为了触发动画，我们可以使用JavaScript来控制火焰的出现和火箭的发射。

<script>
  window.onload = function() {
    const flame = document.getElementById('flame');
    flame.setAttribute('opacity', '1'); // 设置火焰可见
  };
</script>

4. 完整代码示例

将上述代码整合在一起，形成一个完整的HTML文件。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点火发射动画</title>
    <style>
        #rocket {
            transform-origin: center bottom; /* 设置旋转中心 */
            animation: launch 3s ease-in-out forwards; /* 设置发射动画 */
        }

        @keyframes launch {
            0% {
                transform: translateY(0) rotate(0deg); /* 初始位置 */
            }
            50% {
                transform: translateY(-150px) rotate(10deg); /* 上升到一定高度并旋转 */
            }
            100% {
                transform: translateY(-300px) rotate(0deg); /* 完全飞出视口 */
            }
        }

        #flame {
            animation: flame-animation 0.5s infinite alternate; /* 火焰动画 */
        }

        @keyframes flame-animation {
            0% {
                opacity: 1; /* 完全可见 */
            }
            100% {
                opacity: 0; /* 渐隐 */
            }
        }
    </style>
</head>
<body>
    <svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
        <g id="rocket">
            <!-- 火箭主体 -->
            <rect x="90" y="100" width="20" height="100" fill="gray" />
            <!-- 火箭顶部 -->
            <polygon points="80,100 120,100 100,60" fill="red" />
            <!-- 火焰 -->
            <g id="flame" opacity="0">
                <polygon points="90,200 110,200 100,230" fill="orange" />
                <polygon points="95,230 105,230 100,260" fill="yellow" />
            </g>
        </g>
    </svg>

    <script>
        window.onload = function() {
            const flame = document.getElementById('flame');
            flame.setAttribute('opacity', '1'); // 设置火焰可见
        };
    </script>
</body>
</html>

5. 说明

在这个示例中，我们创建了一个简单的火箭图形，并使用CSS3的动画效果来模拟发射过程。火焰的颜色和透明度变化使得效果更加生动。可以根据需要调整动画的持续时间、火箭的飞行高度等参数，以达到理想的效果。

总结

通过结合CSS3和SVG，我们能够制作出流畅且吸引人的点火发射动画。这种技术可以用于网页、应用程序等多种场景，丰富用户体验。根据具体需求，动画效果可以进一步扩展和优化。