当前位置：首页 > CSS

css制作奔跑白熊

2026-03-12 08:33:49CSS

CSS奔跑白熊动画实现

通过CSS动画和关键帧技术可以创建一个奔跑的白熊效果，以下是具体实现方法：

HTML结构

创建一个包含熊身体各部分的HTML结构：

<div class="bear">
  <div class="head"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="body"></div>
  <div class="arm left"></div>
  <div class="arm right"></div>
  <div class="leg left"></div>
  <div class="leg right"></div>
</div>

CSS样式与动画

通过关键帧动画实现奔跑效果：

.bear {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 100px auto;
}

.head {
  position: absolute;
  width: 80px;
  height: 70px;
  background: white;
  border-radius: 50%;
  top: 0;
  left: 60px;
}

.ear {
  position: absolute;
  width: 25px;
  height: 25px;
  background: white;
  border-radius: 50%;
  top: -10px;
}

.ear.left { left: 55px; }
.ear.right { left: 100px; }

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

.eye.left { left: 75px; }
.eye.right { left: 95px; }

.body {
  position: absolute;
  width: 100px;
  height: 80px;
  background: white;
  border-radius: 40px;
  top: 60px;
  left: 50px;
}

.arm, .leg {
  position: absolute;
  width: 20px;
  height: 40px;
  background: white;
  border-radius: 10px;
}

.arm.left {
  top: 70px;
  left: 40px;
  transform-origin: top center;
  animation: armSwing 0.5s infinite alternate;
}

.arm.right {
  top: 70px;
  left: 140px;
  transform-origin: top center;
  animation: armSwing 0.5s infinite alternate-reverse;
}

.leg.left {
  top: 130px;
  left: 60px;
  transform-origin: top center;
  animation: legSwing 0.5s infinite alternate;
}

.leg.right {
  top: 130px;
  left: 120px;
  transform-origin: top center;
  animation: legSwing 0.5s infinite alternate-reverse;
}

@keyframes armSwing {
  0% { transform: rotate(-20deg); }
  100% { transform: rotate(20deg); }
}

@keyframes legSwing {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}

.bear {
  animation: run 1s infinite linear;
}

@keyframes run {
  0% { transform: translateX(0); }
  100% { transform: translateX(50px); }
}

效果增强技巧

为让奔跑效果更真实，可以添加以下改进：

.body {
  animation: bodyBounce 0.5s infinite alternate;
}

@keyframes bodyBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(5px); }
}

.head {
  animation: headBob 0.5s infinite alternate;
}

@keyframes headBob {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

移动控制

添加JavaScript使熊能跟随鼠标移动：

css制作奔跑白熊

document.addEventListener('mousemove', (e) => {
  const bear = document.querySelector('.bear');
  const mouseX = e.clientX;
  const direction = mouseX > window.innerWidth/2 ? 1 : -1;
  bear.style.transform = `scaleX(${direction}) translateX(${mouseX/10}px)`;
});