css3制作白云

使用CSS3制作白云效果

通过CSS3的box-shadow、border-radius和渐变属性可以模拟白云效果。以下是两种实现方法：

基础圆形云朵

.cloud {
  width: 100px;
  height: 60px;
  background: white;
  border-radius: 50%;
  position: relative;
  box-shadow: 
    40px 15px 0 -10px white,
    -20px 30px 0 0 white,
    20px 30px 0 5px white;
}

动态渐变云朵

.cloud {
  width: 180px;
  height: 60px;
  background: radial-gradient(circle at 30px 15px, white 25px, transparent 26px),
              radial-gradient(circle at 60px 30px, white 35px, transparent 36px),
              radial-gradient(circle at 90px 15px, white 30px, transparent 31px);
  border-radius: 50%;
  filter: blur(1px);
  animation: float 8s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

复合云层效果

.cloud-container {
  position: relative;
  width: 300px;
  height: 150px;
}

.cloud-layer {
  position: absolute;
  background: white;
  border-radius: 50%;
}

.layer1 {
  width: 120px;
  height: 80px;
  top: 20px;
  left: 50px;
  box-shadow: 80px -10px 0 30px white;
}

.layer2 {
  width: 160px;
  height: 60px;
  top: 60px;
  left: 100px;
  opacity: 0.8;
}

实现要点

• 使用多个圆形元素组合成云朵形状
• 通过box-shadow创建延伸的云团效果
• 添加轻微模糊(filter: blur)增强真实感
• 应用动画实现漂浮效果
• 使用透明度变化表现云层厚度差异

这些方法均可通过调整参数实现不同风格的云朵效果，建议结合背景色和阴影颜色营造立体感。