将gif图用ps分成一张一张的png图,本来有35张图,这里只采用了7张图,用雪碧图拼接在一起
通过动画修改背景图,让小熊跑动起来
缺点:虽然实现了动画效果,但是还是使用了较大的图片,尽量用svg实现
.bear{
width: 400px;
height: 400px;
background: url("https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true") 0 0 no-repeat;
animation: myMove;
animation-iteration-count: infinite;/* 动画无限播放 */
animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
animation-duration: 950ms;/* 动画运行的时间 */
}
@keyframes myMove{
0% { background-position: -10px -10px; }
16.67% { background-position: -430px -10px; }
33.33% { background-position: -850px -10px; }
50% { background-position: -1270px -10px; }
66.67% { background-position: -1690px -10px; }
83.34% { background-position: -2110px -10px; }
100% { background-position: -2530px -10px; }
}