>웹 프론트엔드 >HTML 튜토리얼 >基于CSS3 Sprite僵尸行走动画特效_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:28:201302검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.