css制作白熊动画

使用CSS绘制白熊动画

通过CSS的clip-path和动画属性可以创建简单的白熊动画效果。以下是一个分步实现方法：

<div class="polar-bear">
  <div class="head"></div>
  <div class="body"></div>
  <div class="ear left"></div>
  <div class="ear right"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="mouth"></div>
</div>

.polar-bear {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.head {
  position: absolute;
  width: 120px;
  height: 100px;
  background: white;
  border-radius: 50%;
  top: 20px;
  left: 40px;
  animation: headMove 3s infinite alternate;
}

.body {
  position: absolute;
  width: 140px;
  height: 160px;
  background: white;
  border-radius: 50%;
  top: 80px;
  left: 30px;
}

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

.ear.left {
  left: 45px;
}

.ear.right {
  left: 125px;
}

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

.eye.left {
  left: 70px;
}

.eye.right {
  left: 115px;
}

.mouth {
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 3px solid black;
  border-radius: 0 0 50% 50%;
  top: 80px;
  left: 85px;
}

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

添加行走动画效果

通过CSS变换实现白熊行走动画：

.polar-bear {
  animation: walk 5s linear infinite;
}

@keyframes walk {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(300px); }
}

.body {
  animation: bodyBounce 0.5s ease-in-out infinite alternate;
}

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

添加雪地背景

增强场景感：

body {
  background: #e0f7fa;
  overflow: hidden;
}

.polar-bear::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 20px;
  background: white;
  border-radius: 50%;
  bottom: -30px;
  left: -50px;
  box-shadow: 
    0 10px 15px rgba(255,255,255,0.8),
    0 -10px 15px rgba(255,255,255,0.4);
}

响应式调整

确保在不同屏幕尺寸下正常显示：

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

  @keyframes walk {
    0% { transform: translateX(-50px) scale(0.7); }
    100% { transform: translateX(200px) scale(0.7); }
  }
}

以上代码组合可以创建一个会行走的白熊CSS动画。通过调整关键帧参数和元素尺寸，可以进一步定制动画效果。