純CSS3實現人物跑步動畫

還記得之前給大家分享的這款CSS3人物行走動畫嗎？動畫效果確實棒極了。

線上演示   原始碼下載

下面我們來一起分析一下實現這個跑步動畫的程式碼和過程，程式碼主要由HTML和CSS組成。

HTML程式碼：

<div class='container'>
  <div class='person'>
    <div class='head'></div>
    <div class='part arm one'></div>
    <div class='part arm two'></div>
    <div class='torso'></div>
    <div class='part leg one'></div>
    <div class='part foot one'></div>
    <div class='part leg two'></div>
    <div class='part foot two'></div>
  </div>
</div>

HTML程式碼非常簡單，從class的定義上可以看出，這裡主要是用線條勾勒出一個人物的形象。當然如何讓這些線條形成連貫的跑步動作，就需要CSS3來實現了。

CSS程式碼：

.container {
  height: 300px;
  width: 300px;

  margin:50px;
}
.person {
  position: absolute;
  height: 75px;
  width: 0;
  color: #fff;
  left: 150px;
  top: 159px;
  transform-origin: 50% 50% 0px;
  -webkit-animation: sprint 2s infinite ease-in;
}
.person .head:before {
  content: "";
  position: absolute;
  top: 0px;
  left: -6px;
  height: 2.7px;
  width: 42px;
  border-radius: 20%;
  border: 4px solid white;
  background-color: #fff;
  transform-origin: 50% 100% 0px;
  z-index: 90;
}
.person .head {
  position: absolute;
  top: -30px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 4px solid white;
  transform-origin: 50% 100% 0px;
  z-index: 90;
  -webkit-animation: bob 2s infinite alternate;
}
.person .head:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 9px;
  height: 12px;
  width: 15px;
  border-radius: 30%;
  border: 4px solid white;
  background-color: #fff;
  z-index: 90;
}
.person .torso {
  position: absolute;
  height: 60px;
  width: 0;
  border-left: 2px solid white;
  left: 0px;
  top: 15px;
  z-index: 90;
}
.person .part {
  position: absolute;
  left: 0;
  top: 75px;
  z-index: 90;
}
.person .part.arm {
  position: absolute;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  height: 45px;
  width: 39px;
  top: 15px;
  right: 300px;
  transform-origin: 0% 0% 0px;
  -webkit-animation: pump 1s infinite ease-in-out;
}
.person .part.arm.one {
  transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
  transform: rotate3d(0, 0, 1, -90deg);
  animation-delay: .5s;
}
.person .part.leg {
  height: 57px;
  width: 60px;
  border-right: 3px solid white;
  border-top: 3px solid white;
  -webkit-animation: run 1s infinite ease-in;
  transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
  transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
  transform: rotate3d(0, 0, 1, 80deg);
  animation-delay: .5s;
}
.person .part .foot {
  position: absolute;
  top: 90px;
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #ffffff;
  z-index: 900;
  border: 3px solid red;
}
@keyframes run {
  0% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 150deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
  }
}
@keyframes pump {
  0% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
  50% {
    transform: rotate3d(0, 0, 1, -70deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 80deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate3d(0, 0, 1, -180deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -100deg);
  }
  75% {
    transform: rotate3d(0, 0, 1, 100deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes sprint {
  0% {
    transform-origin: 50% 50% 0px;
    transform: translate(-500px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
    transform-origin: 50% 50% 0px;
    transform: translate(500px, 0px);
  }
}

這裡主要定義了5組CSS3動畫，分別是頭、雙手、雙腳的運動動畫描述，裡面的這些引數大家可以自己修改試試。這樣一款CSS3人物跑步動畫就完成了。

線上演示    原始碼下載