css制作青蛙

2026-01-28 11:06:16CSS

使用CSS绘制青蛙

通过CSS的border-radius和transform属性可以创建卡通风格的青蛙造型。以下是一个简单的实现示例：

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

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

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

.left {
  left: 40px;
}

.right {
  right: 40px;
}

.mouth {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color: #FF6347;
  border-radius: 0 0 50% 50%;
  bottom: 30px;
  left: 60px;
}

添加交互效果

为青蛙添加悬停动画效果，使其更加生动：

.frog:hover {
  transform: scale(1.1);
}

.eye::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

.frog:hover .eye::before {
  animation: blink 0.5s;
}

@keyframes blink {
  0% { height: 15px; }
  50% { height: 2px; top: 20px; }
  100% { height: 15px; }
}

进阶样式调整

通过阴影和渐变增强立体感：

.frog {
  box-shadow: 
    0 5px 15px rgba(0,0,0,0.3),
    inset 0 -10px 20px rgba(0,100,0,0.4);
  background: 
    radial-gradient(circle at 30% 40%, #98FB98, #7CFC00);
}

.mouth {
  box-shadow: 
    inset 0 5px 10px rgba(0,0,0,0.2);
}

响应式调整

使用CSS变量使青蛙尺寸可灵活调整：

:root {
  --frog-size: 200px;
}

.frog {
  width: var(--frog-size);
  height: calc(var(--frog-size) * 0.75);
}

@media (max-width: 600px) {
  :root {
    --frog-size: 150px;
  }
}

这些代码组合可以创建一个基础的CSS青蛙图形，通过调整颜色、尺寸和动画参数可获得不同风格的视觉效果。

css制作青蛙