如何用HTML和CSS实现自动播放视频轮播？现有代码无效

现有代码的核心问题 #

1. 混入了JavaScript代码，违反了「仅用HTML+CSS」的要求
2. @keyframes 语法错误（多余的双引号）
3. 结构是图片轮播，未适配视频需求
4. 缺少必要的视频属性配置（浏览器要求自动播放需静音）

修正后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS视频轮播</title>
    <style>
        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 轮播容器：首屏占满 */
        .carousel-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        /* 轮播轨道：宽度为轮播项数量的100% */
        .carousel-track {
            display: flex;
            width: 300%; /* 3个轮播项，所以设为300% */
            animation: slide 15s linear infinite;
        }

        /* 鼠标悬停暂停轮播 */
        .carousel-container:hover .carousel-track {
            animation-play-state: paused;
        }

        /* 轮播项：占满容器 */
        .carousel-item {
            width: 100vw;
            height: 100vh;
        }

        /* 视频适配容器 */
        .carousel-item video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持视频比例，填满容器 */
        }

        /* 滚动动画：从0位移到-200%（因为3个项，滚动2个项的距离就回到起点） */
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-200%);
            }
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-track">
            <div class="carousel-item">
                <video src="your-video-1.mp4" autoplay muted loop playsinline></video>
            </div>
            <div class="carousel-item">
                <video src="your-video-2.mp4" autoplay muted loop playsinline></video>
            </div>
            <div class="carousel-item">
                <video src="your-video-3.mp4" autoplay muted loop playsinline></video>
            </div>
            <!-- 可选：重复第一个项，实现无缝衔接的视觉效果 -->
            <div class="carousel-item">
                <video src="your-video-1.mp4" autoplay muted loop playsinline></video>
            </div>
        </div>
    </div>
</body>
</html>

关键实现说明 #

• 视频属性配置：autoplay 开启自动播放，muted 静音（浏览器强制要求自动播放需静音），loop 循环播放，playsinline 适配移动端内联播放
• 轮播轨道宽度：设置为轮播项数量的100%，比如3个项就设为300%，确保所有项在一行排列
• 动画逻辑：translateX(-200%) 对应3个项的滚动距离，动画时长15秒可按需调整，linear 保持匀速滚动
• 悬停暂停：通过animation-play-state: paused实现纯CSS的暂停控制，无需JS
• 无缝衔接：在轨道末尾重复第一个视频项，滚动到最后时会自然衔接开头，避免跳变

内容的提问来源于stack exchange，提问作者Ayrton Valdivia