SOURCE

console 命令行工具 X clear

                    
>
console
<div class="marquee">
    <ul class="marquee-content">
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/83/d8/87/83d8872d132c6ac00c63400b117ce5e3.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/aa/0b/da/aa0bda92c9df82c01eb912476f46fc5d.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/5b/68/48/5b6848953f69c3110eb9ab6098989cef.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/93/d0/05/93d0058fa20777c4d4c1b9057b832422.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/61/89/fa/6189faa4e916e1067be4a3259150e714.jpg" alt="">
        </li>

        <!-- 重复元素 -->
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/83/d8/87/83d8872d132c6ac00c63400b117ce5e3.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/aa/0b/da/aa0bda92c9df82c01eb912476f46fc5d.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/5b/68/48/5b6848953f69c3110eb9ab6098989cef.jpg" alt="">
        </li>
        <li class="marquee-item">
            <img class="marquee-image" src="https://up.enterdesk.com/edpic_source/93/d0/05/93d0058fa20777c4d4c1b9057b832422.jpg" alt="">
        </li>
    </ul>
</div>
* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
}
.marquee {
    width: 800px;
    height: 150px;
    overflow: hidden;
    margin-top: 100px;
}
.marquee-content {
    display: flex;
    list-style: none;
    animation: scrolling 10s linear infinite;
}
.marquee-item {
    width: 200px;
    height: 150px;
    flex-shrink: 0;
}
.marquee-image {
    width: 100%;
    height: 100%;
}

@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translatex(-1000px); }
}