css制作青蛙

使用CSS绘制卡通青蛙

创建一个简单的卡通青蛙需要结合HTML和CSS，利用div元素和CSS样式进行绘制。以下是实现步骤：

<div class="frog">
  <div class="head"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="mouth"></div>
  <div class="body"></div>
  <div class="leg left"></div>
  <div class="leg right"></div>
</div>

.frog {
  position: relative;
  width: 200px;
  height: 150px;
}

.head {
  position: absolute;
  width: 100px;
  height: 80px;
  background-color: #7CFC00;
  border-radius: 50%;
  top: 10px;
  left: 50px;
}

.body {
  position: absolute;
  width: 120px;
  height: 80px;
  background-color: #7CFC00;
  border-radius: 50%;
  top: 70px;
  left: 40px;
}

.eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  top: 20px;
}

.eye.left {
  left: 60px;
}

.eye.right {
  left: 120px;
}

.mouth {
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: black;
  border-radius: 5px;
  top: 50px;
  left: 80px;
}

.leg {
  position: absolute;
  width: 30px;
  height: 50px;
  background-color: #7CFC00;
  border-radius: 15px;
  top: 120px;
}

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

.leg.right {
  left: 120px;
  transform: rotate(30deg);
}

添加动画效果

让青蛙的眼睛眨动：

.eye::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 49%, 51%, 100% {
    height: 10px;
  }
  50% {
    height: 2px;
  }
}

响应式调整

使青蛙大小适应不同屏幕：

@media (max-width: 600px) {
  .frog {
    transform: scale(0.7);
  }
}

进阶样式选项

添加阴影和渐变效果增强立体感：

.body, .head {
  box-shadow: inset 0 -10px 20px rgba(0,100,0,0.5);
  background: linear-gradient(to bottom, #7CFC00, #32CD32);
}

.leg {
  box-shadow: inset 0 -5px 10px rgba(0,100,0,0.3);
}

通过组合这些CSS属性，可以创建出从简单到复杂的青蛙图形。调整尺寸、颜色和动画参数可获得不同风格的青蛙效果。