Home >Web Front-end >HTML Tutorial >基于CSS3 Sprite僵尸行走动画特效_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:28:201302browse

分享一款基于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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn