HTML & CSS 动画场景：绘制蓝天白云效果

使用 HTML 和 CSS 绘制蓝天白云的动画场景，可以按照以下步骤进行操作：

在 HTML 中创建一个包含场景的 div 元素，并设置其宽度和高度。
在 CSS 中设置背景颜色为蓝色，即表示天空颜色。
在 CSS 中创建一个云朵类，用于绘制云朵。可以使用 CSS 的 border-radius 属性和 box-shadow 属性来绘制云朵的形状和阴影效果。
在 HTML 中创建多个云朵元素，并设置它们的位置和大小。可以使用 CSS 的 position 属性和 top、left、width、height 属性来控制云朵的位置和大小。
在 CSS 中使用动画效果来模拟云朵的移动。可以使用 CSS 的 @keyframes 规则和 animation 属性来设置动画效果，从而让云朵在场景中移动起来。
最后，在 HTML 中添加一个太阳元素，并使用 CSS 设置其样式和位置。可以使用 CSS 的 border-radius 属性和 background 属性来绘制太阳的形状和颜色，使用 position 属性和 top、left 属性来设置太阳的位置。

以下是示例代码：

HTML 代码：

<div class='scene'>
  <div class='sun'></div>
  <div class='cloud cloud1'></div>
  <div class='cloud cloud2'></div>
  <div class='cloud cloud3'></div>
</div>

CSS 代码：

.scene {
  width: 100%;
  height: 500px;
  background-color: #87CEEB; /* 蓝天颜色 */
  position: relative;
}

.cloud {
  height: 60px;
  width: 120px;
  border-radius: 60px;
  position: absolute;
  background-color: #fff; /* 白云颜色 */
  box-shadow: 0 0 20px #fff; /* 白云阴影 */
  animation: move 20s ease-in-out infinite; /* 云朵动画效果 */
}

.cloud1 {
  top: 100px;
  left: 50px;
}

.cloud2 {
  top: 150px;
  left: 200px;
}

.cloud3 {
  top: 200px;
  left: 350px;
}

.sun {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #FFD700; /* 太阳颜色 */
  position: absolute;
  top: 50px;
  left: 50px;
}

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

这样，就可以在浏览器中看到一个蓝天白云的动画场景了。云朵会不断地从左到右移动，太阳则静止不动。可以通过调整 CSS 中的参数来改变场景的效果。