css3制作白云

CSS3 制作白云效果

使用CSS3的渐变、阴影和变形属性可以创建逼真的白云效果。以下是几种实现方法：

基础圆形云朵

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

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

渐变云朵

使用径向渐变创造更柔和的云层效果：

.cloud {
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 30% 40%, white 25%, transparent 25%),
              radial-gradient(circle at 70% 40%, white 25%, transparent 25%),
              radial-gradient(circle at 50% 70%, white 30%, transparent 30%);
  border-radius: 50%;
  filter: blur(2px);
}

动画云朵

添加CSS动画使云朵缓慢移动：

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

.cloud {
  animation: float 8s ease-in-out infinite;
}

多层云效果

创建更复杂的云层结构：

.cloud {
  position: relative;
  width: 200px;
  height: 100px;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}

.cloud::before {
  width: 80px;
  height: 80px;
  top: 10px;
  left: 20px;
}

.cloud::after {
  width: 120px;
  height: 60px;
  top: 30px;
  left: 60px;
  box-shadow: 40px 0 0 10px white;
}

3D云朵效果

使用多重阴影创造立体感：

.cloud {
  width: 100px;
  height: 60px;
  background: white;
  border-radius: 50%;
  box-shadow:
    10px 10px 15px -5px rgba(0,0,0,0.2),
    inset 5px 5px 10px rgba(255,255,255,0.8);
}

这些方法可以根据需要组合使用，调整大小、颜色和位置来创建不同风格的云朵效果。通过修改模糊度、透明度和动画参数，可以实现从卡通风格到写实风格的各种云朵。