本文作者html5tricks,转载请注明出处
还记得之前给大家分享的这款CSS3人物行走动画吗?动画效果确实棒极了。今天我们再分享一款基于CSS3的人物跑步动画,跑步动画非常简单,跑步的人物仅仅用一些线条勾勒出来,通过这些线条的弯曲和移动形成跑步的动画效果。
下面我们来一起分析一下实现这个跑步动画的代码和过程,代码主要由HTML和CSS组成。
HTML代码:
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 { <