css制作青蛙

使用CSS绘制青蛙

通过CSS的border-radius、gradient和transform等属性可以创建卡通风格的青蛙图形。以下是关键实现步骤：

青蛙身体

使用椭圆形作为主体，搭配渐变颜色模拟立体感：

.frog-body {
  width: 150px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #8bc34a, #4caf50);
  position: relative;
}

眼睛部分

通过伪元素创建白色眼球和黑色瞳孔：

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

.frog-body::before {
  left: 30px;
  box-shadow: 10px 10px 0 5px black;
}

.frog-body::after {
  right: 30px;
  box-shadow: -10px 10px 0 5px black;
}

腿部设计

使用旋转的椭圆制作弯曲的腿部效果：

.leg {
  width: 40px;
  height: 20px;
  background: #4caf50;
  border-radius: 50%;
  position: absolute;
  bottom: -10px;
}

.leg-front {
  transform: rotate(30deg);
  left: 20px;
}

.leg-back {
  transform: rotate(-30deg);
  right: 20px;
}

添加细节

通过阴影和边框增强立体感：

.frog-body {
  box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2);
  border: 2px solid #388e3c;
}

完整实现需组合这些元素，并通过@keyframes添加眨眼等动画效果增强生动性。调整尺寸比例可控制青蛙的胖瘦造型。