<template>
<div class="page">
<div class="bg-img"></div>
</div>
</template>
<style lang="scss" scoped>
.page{
background: url("~@/assets/01/bg1.png") no-repeat center/contain;
}
.bg-img {
position: absolute;
top: 30px;
width: 100%;
height: 100%;
animation: sg-animate 4s infinite; //在两秒内完成序列png动画图片来(回播放alternate)，并循环无限次(infinite)
$bgPreUrl: "~@/assets/01/bgs/红绸00"; //序列图路径前缀
@keyframes sg-animate {
$len: 39; //逐帧动画画面自由39张图
@for $i from 0 through $len {
#{ $i * 2.5% } {
background-image: url(#{$bgPreUrl}#{$i}.png);
opacity: 1;
// background-image: url("~@/assets/01/bgs/红绸0000.png");
}
}
// 序列图播放完毕那一刻到100%时间（第2s结束那一刻）之间都停留在最后一张序列图静止不动
#{ $len * 2.5% },
100% {
opacity: 1;
background-image: url(#{$bgPreUrl}#{$len}.png);
}
}
}
</style>
方法2
img{
display: block;
position: absolute;
bottom:0;
width: 100%;
height: 100%;
opacity: 1;
}
@keyframes stys{
0%{opacity: .5;}
100%{opacity: 0;}
}
.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
opacity: 0;
}
.image1,.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
animation-name: stys;
animation-timing-function:ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
animation-duration: 1s;
}
