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); }
}