CSS3 如何实现飘动的云朵动画

CSS3可以通过关键帧（keyframes）和动画（animations）属性实现飘动的云朵动画。以下是实现云朵飘动的基本步骤和示例代码：

1. 定义关键帧（keyframes）：创建一个动画序列，描述云朵从一个状态到另一个状态的变化。
2. 应用动画（animations）：将关键帧应用到相应的HTML元素上，并设置动画的持续时间、延迟和其他参数。

示例代码：

/* 定义关键帧 */
@keyframes float-cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
 
/* 应用动画 */
.cloud {
  width: 100px;
  height: 50px;
  background: #white;
  border-radius: 20px;
  animation: float-cloud 5s infinite alternate; /* 持续时间5秒，无限次数，交替方向 */
}

<!-- HTML结构 -->
<div class="cloud"></div>

这段代码定义了一个名为float-cloud的关键帧动画，它使云朵从当前位置向右移动100px，然后返回原位。这个动画被应用到拥有cloud类的HTML元素上，并设置为无限循环和交替方向，从而模拟云朵飘飘而过的效果。