用 CSS3 绘制一只行走的动画大象：一步一步的指南

2023-10-08 14:00:17

如何使用 CSS3 绘制一只行走的动画大象

摘要

概要： 本文将引导您通过 CSS3 绘制一只行走的动画大象。这篇文章将逐步介绍大象身体结构的各个部分，并展示如何使用 CSS3 动画创建逼真的行走效果。

目标： 了解 CSS3 动画的基本原理，并能够创建复杂的、动画化的图形。

绘制大象的身体结构

头部

<div id="head">
  <div id="eyes"></div>
  <div id="ears"></div>
  <div id="trunk"></div>
</div>

身体

<div id="body">
  <div id="legs"></div>
  <div id="tail"></div>
</div>

动画大象的运动

耳朵

#ears {
  animation: flap-ears 2s infinite alternate;
}

@keyframes flap-ears {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

鼻子

#trunk {
  animation: wave-trunk 2s infinite alternate;
}

@keyframes wave-trunk {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

腿部

#legs {
  animation: walk 2s infinite alternate;
}

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

尾巴

#tail {
  animation: wag-tail 2s infinite alternate;
}

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

完整的代码

<style>
/* 代码 */
</style>

<body>
  <div id="elephant">
    <div id="head">
      <div id="eyes"></div>
      <div id="ears"></div>
      <div id="trunk"></div>
    </div>
    <div id="body">
      <div id="legs"></div>
      <div id="tail"></div>
    </div>
  </div>
</body>