html手指滑动控制序列帧,使用ScrollMagic和精灵图实现的步帧序列动画

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

width: 100%;

margin: 0;

}

.header {

color: white;

}

.section {

height: 50%;

background: #FFFFFF;

color: black;

}

.scene {

height: 100%;

width: 100%;

background: #EAEAEA;

}

.center {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100%;

}

.viewer {

height: 100%;

margin-left: auto;

margin-right: auto;

max-width: 200px;

width: 100%;

background-image: url(/uploads/160801/doodle-sprite.png);

background-repeat: no-repeat;

background-position: 0 50%;

}

.viewer.frame1 {

background-position: -200px 50%;

}

.viewer.frame2 {

background-position: -400px 50%;

}

.viewer.frame3 {

background-position: -600px 50%;

}

.viewer.frame4 {

background-position: -800px 50%;

}

.viewer.frame5 {

background-position: -1000px 50%;

}

.viewer.frame6 {

background-position: -1200px 50%;

}

.viewer.frame7 {

background-position: -1400px 50%;

}

.viewer.frame8 {

background-position: -1600px 50%;

}

.viewer.frame9 {

background-position: -1800px 50%;

}

@-webkit-keyframes drink-coffee {

to {

background-position: -1800px 50%;

}

}

@keyframes drink-coffee {

to {

background-position: -1800px 50%;

}

}