CSS3 スプライトに基づくゾンビ歩行アニメーション特殊効果_html/css_WEB-ITnose

CSS3 スプライトに基づいたゾンビ歩行アニメーションの特殊効果を共有します。これは、アニメーションアニメーションのsteps属性を使用して作成された、ゾンビの歩行CSS3スプライトアニメーション特殊効果です。レンダリングは次のとおりです:

オンライン プレビュー ソース コードのダウンロード

実装コード。

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