css3制作白云

使用CSS3制作白云效果

通过CSS3的box-shadow、border-radius和渐变等特性，可以模拟白云的柔和形状。以下是两种常见实现方法：

基础圆形叠加法

通过多个圆形元素叠加形成云朵轮廓：

.cloud {
  position: relative;
  width: 120px;
  height: 60px;
}
.cloud:before, .cloud:after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
}
.cloud:before {
  width: 60px;
  height: 60px;
  top: -30px;
  left: 30px;
}
.cloud:after {
  width: 90px;
  height: 90px;
  top: -40px;
  right: 0;
}

阴影扩散法

利用多重阴影创造蓬松感：

.fluffy-cloud {
  width: 100px;
  height: 60px;
  background: white;
  border-radius: 50%;
  box-shadow: 
    30px 10px 0 10px white,
    -15px 20px 0 20px white,
    40px -10px 0 15px white;
  filter: blur(1px);
}

动态漂浮效果

添加动画让云朵移动：

@keyframes float {
  0% { transform: translateX(0); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}
.cloud {
  animation: float 5s infinite ease-in-out;
}

进阶细节优化

• 使用filter: blur()增加边缘柔化
• 添加半透明效果：background: rgba(255,255,255,0.9)
• 多层云组合时调整z-index创造景深
• 通过transform: scale()实现远近大小变化

完整示例可结合HTML结构：

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

背景建议使用渐变色：

.sky {
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FF 100%);
  height: 300px;
}