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 15px white,
    30px 30px 0 10px white;
}

动画云朵

添加浮动动画效果：

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

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

渐变云朵

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

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

多层云朵结构

通过伪元素创建复杂云层：

.layered-cloud {
  position: relative;
  width: 120px;
  height: 70px;
  background: white;
  border-radius: 50%;
}

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

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

.layered-cloud::after {
  width: 60px;
  height: 60px;
  top: -20px;
  right: 10px;
}

响应式云朵

使用视窗单位确保云朵比例适应不同屏幕：

.responsive-cloud {
  width: 15vw;
  height: 9vw;
  background: white;
  border-radius: 50%;
  box-shadow: 
    6vw 1.5vw 0 1vw white,
    -3vw 3vw 0 1.5vw white,
    4.5vw 3vw 0 1vw white;
}

这些方法可以单独使用或组合应用，通过调整尺寸、颜色和阴影参数可获得不同风格的云朵效果。