波涛汹涌，蛟龙腾空：用 HTML 和 CSS 实现「蛟龙闹海」动画

2023-09-13 22:57:37

蛟龙闹海：利用 CSS 和 HTML 创造生动的动画

海浪的流动之美

踏上令人惊叹的动画之旅，我们从海浪开始。利用 CSS 的魔力，我们将赋予海浪生命，让它在屏幕上轻盈地舞动。只需创建一个简单的 div 元素，通过 animation 属性设定运动参数，即可打造出栩栩如生的海浪效果。

<div class="wave"></div>

.wave {
  width: 100%;
  height: 200px;
  background-color: #0099FF;
  animation: wave 5s infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

蛟龙破浪而出

接下来，我们召唤出传说中的蛟龙。借助 SVG 的力量，我们将绘制出蛟龙的英姿，并通过 CSS 的 transform 属性使其动起来。

<svg class="dragon">
  <path d="M100 100 L200 150 L300 100 L400 150 L500 100 L600 150 L700 100" stroke="#FF0000" stroke-width="10" fill="none"/>
</svg>

.dragon {
  position: absolute;
  top: 100px;
  left: 100px;
  animation: dragon 5s infinite;
}

@keyframes dragon {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(200px);
  }
}

云朵随风飘扬

最后，我们点缀天空，添加几朵轻盈的云朵。通过 CSS 的 border-radius 属性，我们将塑造出它们的圆润外形，并利用 animation 属性赋予它们自由飘动的动画。

<div class="cloud"></div>

.cloud {
  width: 100px;
  height: 50px;
  background-color: #FFFFFF;
  border-radius: 50%;
  animation: cloud 5s infinite;
}

@keyframes cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

动画的编排

现在，我们已拥有了海浪、蛟龙和云朵的动画，是时候将它们完美地组合在一起了。通过 CSS 的 position 和 z-index 属性，我们将控制元素的相对位置和层叠顺序，打造出引人入胜的动画效果。

<div class="container">
  <div class="wave"></div>
  <svg class="dragon"></svg>
  <div class="cloud"></div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 500px;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.dragon {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.cloud {
  position: absolute;
  top: 50px;
  left: 200px;
  z-index: 3;
}