css制作动态青蛙

使用CSS动画制作动态青蛙

通过CSS的@keyframes和transform属性可以创建青蛙跳跃或眨眼的动画效果。以下是一个完整的实现示例：

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

.frog {
  position: relative;
  width: 200px;
  height: 150px;
  animation: jump 2s infinite;
}

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

.body {
  position: absolute;
  width: 150px;
  height: 100px;
  background: #7cba6d;
  border-radius: 50% 50% 40% 40%;
  bottom: 0;
  left: 25px;
}

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

.eye.left {
  left: 20px;
}

.eye.right {
  right: 20px;
}

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

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

@keyframes blink {
  0%, 48%, 52%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}

添加舌头动画效果

为青蛙添加可伸缩的舌头效果：

.tongue {
  position: absolute;
  width: 5px;
  height: 0;
  background: #ff6b6b;
  border-radius: 0 0 5px 5px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: flick 4s infinite;
}

@keyframes flick {
  0%, 80% { height: 0; }
  85%, 95% { height: 40px; }
}

响应式交互效果

添加鼠标悬停时青蛙变色的效果：

.frog:hover {
  filter: hue-rotate(30deg);
}

.frog:hover .tongue {
  animation: flick 1s infinite;
}

使用CSS变量控制颜色

通过CSS变量方便调整青蛙主题色：

:root {
  --frog-green: #7cba6d;
  --frog-dark: #5a8a4e;
}

.frog {
  --current-color: var(--frog-green);
}

.frog:hover {
  --current-color: var(--frog-dark);
}

性能优化技巧

使用will-change属性提前告知浏览器哪些属性会变化：

.frog {
  will-change: transform;
}

.eye::after {
  will-change: transform;
}

这些代码组合起来可以创建一个活泼的CSS青蛙动画，包含跳跃、眨眼和伸缩舌头等效果。通过调整关键帧时间和变换属性，可以控制动画的节奏和幅度。