肥乡专业做网站,多用户商城系统的服务态度,广东seo网站设计价格,在360怎么做网站使用场景#xff1a;两段序列帧动画连接播放#xff0c;先播放第一段播一次#xff0c;再播放第二段#xff0c;第二段循环播放#xff0c;在ios机型上出现动画闪动#xff0c;播放不正常。
错误的写法#xff1a;把每一段序列帧动画单独写在了定义的动画里
.gacha-bg…使用场景两段序列帧动画连接播放先播放第一段播一次再播放第二段第二段循环播放在ios机型上出现动画闪动播放不正常。
错误的写法把每一段序列帧动画单独写在了定义的动画里
.gacha-bg {width: 750rpx;height: 1000rpx;animation: gacha 1.6s steps(22), xing 2s steps(27);animation-delay: 0.8s, 2.4s;animation-iteration-count: 1, infinite;animation-fill-mode: forwards, forwards;
}keyframes gacha {0% {background-image: url(1.jpg);background-size: 17250rpx;background-repeat: no-repeat;background-position: 0;}100% {background-image: url(1.jpg);background-size: 17250rpx;background-repeat: no-repeat;background-position: -16500rpx;}
}keyframes xing {0% {background-image: url(bg.jpg);background-size: 21000rpx;background-repeat: no-repeat;background-position: 0;}100% {background-image: url(bg.jpg);background-size: 21000rpx;background-repeat:no-repeat;background-position: -20250rpx 0;}
}修改后
背景图需要统一写一遍由于第二段要循环播放所以需要在定义的第二段动画里写上图片信息
.gacha-bg {width: 750rpx;height: 1000rpx;animation: gacha 1.6s steps(22), xing 2s steps(27);animation-delay: 0.8s, 2.4s;animation-iteration-count: 1, infinite;animation-fill-mode: forwards, forwards;background-image: url(1.jpg),url(bg.jpg);background-size: 17250rpx,21000rpx;background-repeat: no-repeat,no-repeat;
}keyframes gacha {0% {background-position: 0 0;}100% {background-position: -16500rpx 0;}
}keyframes xing {0% {background-image: url(bg.jpg);background-size: 21000rpx;background-repeat: no-repeat;background-position: 0 0;}100% {background-image: url(bg.jpg);background-size: 21000rpx;background-repeat: no-repeat;background-position: -20250rpx 0;}
}
