用于水平移动块的 CSS 过渡动画-解网

问：

我有点卡住了水平实现移动块。这个想法是从右向左移动奇数行，从左向右移动偶数行。到目前为止，我已经以某种方式使它工作，但是块在屏幕上的出现和消失方式存在问题。该行中的所有元素都应该进入循环，在最后一个元素之后应该再次进入第一个元素，但它不起作用并显示一个空格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .ticker-container {
            background-color: #333;
            color: #fff;
        }

        .ticker-line-container {
            overflow: hidden;
            margin-bottom: 50px;
        }

        .ticker-line {
            display: flex;
            gap: 50px;
            width: max-content;
        }

        .ticker-item {
            width: 300px;
            height: 200px;
            box-sizing: border-box;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @keyframes ticker-animation-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes ticker-animation-right {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body>

<div class="ticker-container">
    <div class="ticker-line-container">
        <div class="ticker-line" style="animation: ticker-animation-left 15s linear infinite;">
            <!-- Add 10 image containers for testing -->
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 1"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 2"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 3"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 4"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 5"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 6"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 7"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 8"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 9"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 10"></div>
        </div>
    </div>

    <div class="ticker-line-container">
        <div class="ticker-line" style="animation: ticker-animation-right 15s linear infinite;">
            <!-- Add 10 image containers for testing -->
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 11"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 12"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 13"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 14"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 15"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 16"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 17"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 18"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 19"></div>
            <div class="ticker-item"><img src="https://picsum.photos/300/200" alt="Image 20"></div>
        </div>
    </div>
</div>

</body>
</html>

HTML CSS 动画过渡

用于水平移动块的 CSS 过渡动画

CSS transition animation for moving blocks horizontally

评论