纯CSS实现超真实的动态云朵效果

.cloud {
  position: absolute;
  width: 200px;
  height: 100px;
  background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 100px 100px 0 0;
  transform: translateX(-50px) translateY(-50px) rotate(-45deg);
  animation: cloud-animation 5s linear infinite;
}
 
.cloud:before, .cloud:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0) 80%);
  border-radius: 50%;
}
 
.cloud:before {
  transform: translateX(50px) translateY(50px) rotate(22.5deg);
}
 
.cloud:after {
  transform: translateX(-50px) translateY(50px) rotate(-22.5deg);
}
 
@keyframes cloud-animation {
  0% {
    transform: translateX(-50px) translateY(-50px) rotate(-45deg);
  }
  100% {
    transform: translateX(50px) translateY(-50px) rotate(225deg);
  }
}

这段代码使用CSS创建了一个动态云朵效果。它使用了伪元素 :before 和 :after 来创建云朵的两个部分，并通过关键帧动画(@keyframes)实现了动态的旋转和移动效果。这是一个简单而又实际的动画示例，适合用于教学目的。