css制作奔跑白熊

使用CSS制作奔跑白熊动画

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

HTML结构

<div class="running-bear"></div>

CSS样式与动画

.running-bear {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: #f0f0f0;
  border-radius: 50% 50% 45% 45%;
  overflow: hidden;
}

.running-bear::before,
.running-bear::after {
  content: '';
  position: absolute;
  background-color: white;
}

/* 熊耳朵 */
.running-bear::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 10px;
  left: 20px;
  box-shadow: 90px 0 white;
}

/* 熊腿动画 */
.running-bear::after {
  width: 20px;
  height: 40px;
  border-radius: 10px;
  bottom: -10px;
  left: 40px;
  animation: run 0.5s infinite alternate;
}

@keyframes run {
  0% {
    transform: translateX(0) rotate(0deg);
    box-shadow: 60px 0 white, 120px 10px white;
  }
  100% {
    transform: translateX(10px) rotate(10deg);
    box-shadow: 60px 10px white, 120px 0 white;
  }
}

增强动画效果

为了使奔跑效果更逼真，可以添加身体起伏动画：

.running-bear {
  animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

添加背景移动效果

创建地面移动的视觉效果增强奔跑感：

<div class="scene">
  <div class="running-bear"></div>
  <div class="ground"></div>
</div>

.scene {
  position: relative;
  width: 300px;
  height: 150px;
  overflow: hidden;
}

.ground {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 20px;
  background: repeating-linear-gradient(
    to right,
    #8B4513,
    #8B4513 20px,
    #A0522D 20px,
    #A0522D 40px
  );
  animation: moveGround 1s linear infinite;
}

@keyframes moveGround {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

优化熊的外观细节

添加面部特征使白熊更生动：

.running-bear {
  /* 原有样式 */
  box-shadow: inset 0 -15px 0 rgba(0,0,0,0.1);
}

.running-bear::before {
  /* 耳朵样式 */
  box-shadow: 90px 0 white, 
              30px 40px 0 -10px black,  /* 左眼 */
              120px 40px 0 -10px black; /* 右眼 */
}

/* 添加鼻子 */
.running-bear::after {
  width: 15px;
  height: 10px;
  background: black;
  border-radius: 50%;
  top: 50px;
  left: 85px;
}

这些代码组合起来将创建一个具有奔跑动画效果的卡通白熊。可以通过调整动画时间和距离参数来控制奔跑速度，修改尺寸和颜色来改变熊的外观。