css实现火箭起飞动画

CSS是一种样式表语言，可以用来美化网页并实现动画效果。今天我们来学习如何使用CSS实现火箭起飞动画。

  .rocket {
    width: 50px;
    height: 100px;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: fly 2s ease infinite;
  }

  @keyframes fly {
    0% {
      bottom: 0;
      transform: translateX(-50%);
    }
    50% {
      bottom: 100%;
      transform: translateX(-50%) rotateZ(90deg);
    }
    100% {
      bottom: 0;
      transform: translateX(-50%);
    }
  }

首先我们需要定义一个火箭的样式，设置它的宽度、高度、背景颜色和定位。然后我们使用动画属性animation来让火箭动起来，动画属性所需要的参数是:动画名称、动画时间、动画速度、动画延迟和动画次数。我们的火箭起飞动画是一个无限循环的动画，所以动画次数设置为infinite。

接着我们需要定义动画的关键帧，通过@keyframes来定义。我们将动画划分为三个关键帧，分别是火箭起飞前、起飞过程和回落过程。在起飞前，火箭位于底部位置，使用transform属性的translateX(-50%)来使它居中，同时bottom属性设置为0。在起飞过程中，火箭沿着Y轴向上飞行，bottom属性设置为100%，transform属性设置为translateX(-50%) rotateZ(90deg)，使其向右旋转90度成垂直飞行的状态。在回落过程中，火箭回到底部位置，同样使用translateX(-50%)来居中位置。

最后我们只需要把火箭的HTML标签定义出来，设置class为rocket，这样在CSS中就可以调用它的样式和动画了。