.zon { width: 100%; height: 700px; position: relative; z-index: -1; } .tou { position: absolute; left: 0; top: 0; width: 100%; height: 700px; z-index: -1; } .tou div { position: absolute; left: 0; top: 0; width: 100%; height: 700px; opacity: 0; background-size: cover; animation: lunbo 32s linear infinite; } .tou div:nth-child(1) { animation-delay: 0s; } .tou div:nth-child(2) { animation-delay: 4s; } .tou div:nth-child(3) { animation-delay: 8s; } .tou div:nth-child(4) { animation-delay: 12s; } .tou div:nth-child(5) { animation-delay: 16s; } .tou div:nth-child(6) { animation-delay: 20s; } .tou div:nth-child(7) { animation-delay: 24s; } .tou div:nth-child(8) { animation-delay: 28s; } @keyframes lunbo { from { opacity: 0; transform: translateX(0%); } to { opacity: 1; transform: translateX(-100%); } }想把他修改成一张图片接一张图片的向右循环播放

可以将CSS3动画的方向和动画延迟时间修改一下，使其实现一张图片接一张图片的向右循环播放的效果。以下是修改后的代码：

.zon {
    width: 100%;
    height: 700px;
    position: relative;
    z-index: -1;
}

.tou {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 700px;
    z-index: -1;
}

.tou div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 700px;
    opacity: 0;
    background-size: cover;
    animation: lunbo 32s linear infinite;
}

.tou div:nth-child(1) {
    animation-delay: 0s;
}

.tou div:nth-child(2) {
    animation-delay: 4s;
}

.tou div:nth-child(3) {
    animation-delay: 8s;
}

.tou div:nth-child(4) {
    animation-delay: 12s;
}

.tou div:nth-child(5) {
    animation-delay: 16s;
}

.tou div:nth-child(6) {
    animation-delay: 20s;
}

.tou div:nth-child(7) {
    animation-delay: 24s;
}

.tou div:nth-child(8) {
    animation-delay: 28s;
}

@keyframes lunbo {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

修改后的代码中，将transform属性的值由translateX(-100%)改为translateX(100%)，使图片向右移动，由于是一张图片接一张图片地循环播放，所以将from和to的值互换，让图片从右侧进入，向左移动。