css制作青蛙

CSS 青蛙制作方法

使用纯CSS绘制青蛙需要结合多种属性，如border-radius、transform和伪元素。以下是分步实现方案：

青蛙身体

.frog {
  width: 200px;
  height: 150px;
  background-color: #7CFC00;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  position: relative;
}

眼睛部分

.frog::before, .frog::after {
  content: '';
  width: 40px;
  height: 60px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -30px;
}

.frog::before {
  left: 30px;
  box-shadow: 0 0 0 10px #7CFC00;
}

.frog::after {
  right: 30px;
  box-shadow: 0 0 0 10px #7CFC00;
}

.eye-pupil {
  width: 15px;
  height: 25px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 15px;
}

腿部造型

.leg {
  width: 40px;
  height: 80px;
  background: #5CB800;
  border-radius: 50%;
  position: absolute;
  bottom: -40px;
}

.left-leg {
  left: 40px;
  transform: rotate(15deg);
}

.right-leg {
  right: 40px;
  transform: rotate(-15deg);
}

最终组合

<div class="frog">
  <div class="left-leg"></div>
  <div class="right-leg"></div>
  <div class="eye-pupil" style="left: 45px;"></div>
  <div class="eye-pupil" style="right: 45px;"></div>
</div>

关键技巧

• 使用border-radius的百分比值实现有机曲线
• 伪元素创造复合形状
• 绝对定位控制部件布局
• 阴影效果增强立体感

调整尺寸和颜色值可获得不同风格的青蛙造型。通过添加animation属性还可实现眨眼等动态效果。