基于CSS3 Sprite僵尸行走动画特效_html/css_WEB-ITnose

分享一款基于CSS3 Sprite僵尸行走动画特效。这是一款使用animation动画的steps属性制作的僵尸行走CSS3 Sprite动画特效。效果图如下 ：

在线预览    源码下载

实现的代码。

css代码：

@charset "utf-8";/* CSS Document *//* General CSS */ *{    padding:0px;    margin:0px;     } body,html {         width:100%;    height:100%;    margin:0px;    padding:0px;    font-family: "Roboto", sans-serif;    font-size: 12px;    font-weight: 700;   } /*DEMO CSS*/ body{     position:relative;    background: transparent url("../img/background.jpg") no-repeat scroll center top / cover;    background-attachment:fixed;} .zoombie {    /*Our png sprite is 2000px x 312px, then each frame is 200px x 312px*/    width: 200px;    height: 312px;    background-image: url("../img/walkingdead.png");    -webkit-animation: play 1.8s steps(10) infinite;    -moz-animation: play 1.8s steps(10) infinite;    -ms-animation: play 1.8s steps(10) infinite;    -o-animation: play 1.8s steps(10) infinite;    animation: play 1.8s steps(10) infinite ; }      @-webkit-keyframes play {    from { background-position:    0px; }    to { background-position: -2000px; }}  @-moz-keyframes play {    from { background-position:    0px; }    to { background-position: -2000px; }} @-ms-keyframes play {    from { background-position:    0px; }    to { background-position: -2000px; }} @-o-keyframes play {    from { background-position:    0px; }    to { background-position: -2000px; }} @keyframes play {    from { background-position:    0px;  }    to { background-position: -2000px;  }}   #wrapper {  transform: translate(-50%, -50%);  position: absolute;  top: 50%;  left: 50%;}

via：http://www.w2bc.com/article/2015-12-15-css3-sprite-run