css3制作白云

使用CSS3制作白云效果

通过CSS3的box-shadow和border-radius属性可以创建逼真的白云效果。以下是一种实现方法：

HTML结构

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

CSS样式

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

添加动画效果

让白云缓慢飘动可以增加真实感：

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

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

多层云朵叠加

创建更复杂的云朵效果：

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

.cloud::before {
  width: 80px;
  height: 80px;
  top: -40px;
  left: 30px;
}

.cloud::after {
  width: 60px;
  height: 60px;
  top: -30px;
  right: 30px;
}

响应式云朵设计

使用相对单位使云朵适应不同屏幕尺寸：

.cloud {
  width: 15vw;
  height: 6vw;
  box-shadow: 
    6vw 1.5vw 0 3vw white,
    9vw 1.5vw 0 4vw white,
    12vw 1.5vw 0 3vw white;
}

云朵颜色渐变

添加轻微的颜色渐变增强立体感：

.cloud {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

这些方法可以组合使用，根据实际需求调整云朵的大小、形状和动画效果，创造出各种不同的白云视觉效果。