css代码如下：
.box { background: #FFBA76; width: 702px; margin: 50px auto; border-radius: 0px 0px 8px 8px; .session { padding-top: 22px; .lottory-box { position: relative; width: 664px; height: 341px; margin: 0 auto; background: no-repeat url("../assets/images/bg-lottery-box.png") center/664px 341px; border-radius: 8px; @include flex(center, center, nowrap, row); .tiger-first, .tiger-second, .tiger-thired { width: 191px; height: 341px; } //背景图是同一个图片，y轴位置不同 .tiger-first { background: url("../assets/images/img-prizelist-border.png") center 62px/191px auto; } .tiger-second { background: url("../assets/images/img-prizelist-border.png") center -167px/191px auto; } .tiger-thired { background: url("../assets/images/img-prizelist-border.png") center -396px/191px auto; } .center { margin: 0 20px; } .top-fill, .bottom-fill { position: absolute; } .top-fill { top: 0; width: 660px; height: 49px; background: linear-gradient(180deg, #D15000 0%, rgba(241, 92, 0, 0) 100%); border-radius: 5px 5px 1px 1px; } .bottom-fill { bottom: 0; width: 660px; height: 49px; background: linear-gradient(180deg, rgba(241, 92, 0, 0) 0%, #D15000 100%); border-radius: 1px 1px 7px 7px; } } img.dray-lottery { width: 549px; } } }注意初始状态下，tiger-first，tiger-second，tiger-thired三张背景图片的定位已近写在css里面，可以根据情况调整。最后界面效果如下图5：
图5 3.2 动画
布局有了就可以让它动起来了，首先让三张背景图匀速运动起来，最后一起停止。代码如下：
lotteryClick() { let u = 1145 //整个背景高度 let that = this //播放动画 jQuery(".tiger").each(function(index) { let currNum = jQuery(this) currNum.animate({backgroundPositionY: "+=" + (u * 3)/75 + \'rem\'}, {easing: "easeInOutCirc", duration: 4000 }) }) }变量u是整个背景图片的高度，先让背景滚动3次，然后再除以75得到先对单位rem，这个75就是上面提到的rootValue，这里用到的是\'+=\'，也就是在原有的backgroundPositionY的基础上再加上一个相对的位移，duration:4000，让这个动画整个执行4秒钟时间。效果如下图6
图6
需求要求三张图片从左到有先后滚动，这个可以使用setTimeout(fn, time);来实现，代码如下：
//播放动画 jQuery(".tiger").each(function(index) { let currNum = jQuery(this) setTimeout(() => { currNum.animate({backgroundPositionY: "+=" + (u * 3)/75 + \'rem\'}, {easing: "easeInOutCirc", duration: 4000 }) }, index * 300) })利用jquery中each的参数index，代表当前元素的下标，乘以300，这样第一个立即执行，第二个300毫秒后执行，第三个600毫秒后执行，效果如下图7：
图6
为了使效果看起来更加逼真，可以让每个图片滚动的时间有所差异，第一个最短，最后一个最长，这样看起来效果更逼真。方法是给一个延迟参数wast，加在配置参数duration上，代码如下：
lotteryClick() { let u = 1145 //整个背景高度 let waste = 800 //调整动画时间 //播放动画 jQuery(".tiger").each(function(index) { let currNum = jQuery(this) setTimeout(() => { currNum.animate({backgroundPositionY: "+=" + (u * 3)/75 + \'rem\'}, {easing: "easeInOutCirc", duration: 4000 + index * waste }) }, index * 300) }) }效果如下图7
图7 3.3 请求接口&再动画