两张图片无缝循环从左向右移动

1. html:

2. css

.main{
height: 500rpx;
width: 100%;
position: relative;
border: solid sandybrown 1px;
}
.back{
width: 100%;
height: 500rpx;
position: absolute;
bottom: 0;
z-index: 1;
}

.wav1-box{
width: 380px;
left: 0;
}
.wav1-1{
right: -375px;
}
.wav1{
position: absolute;
bottom: 0;
z-index: 2;
height: 98rpx;
width: 100%;
}
.wav1-box image{
width: 100%;
/动画名称/
animation-name: move1;
/动画时间/
animation-duration: 7s;
/动画次数/
animation-iteration-count: infinite;
/匀速/
animation-timing-function: linear;
}
@keyframes move1 {

0%{
transform: translateX(-375px);
}

100%{
transform: translateX(0px);
}
}

.wav2{
position: absolute;
bottom: 0;
z-index: 3;
height: 95rpx;
width: 100%;
}

.wav2-box{
width: 380px;
left: 0;
}
.wav2-1{
right: -375px;
}
.wav2-box image{
width: 100%;
/动画名称/
animation-name: move;
/动画时间/
animation-duration: 6s;
/动画次数/
animation-iteration-count: infinite;
/匀速/
animation-timing-function: linear;
}
@keyframes move {

0%{
transform: translateX(-375px);
}

100%{
transform: translateX(0px);
}
}