你的位置:首页 > 软件开发 > 网页设计 > 基于CSS3 Sprite僵尸行走动画特效

基于CSS3 Sprite僵尸行走动画特效

发布时间:2016-01-26 14:00:03
分享一款基于CSS3 Sprite僵尸行走动画特效。这是一款使用animation动画的steps属性制作的僵尸行走CSS3 Sprite动画特效。效果图如下 :在线预览 源码下载实现的代码。css代码:@charset "utf-8"; ...

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

基于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%;}

原标题:基于CSS3 Sprite僵尸行走动画特效

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。