<body>
<div class="carousel">
<div class="carousel-track">
<div class="carousel-item">React</div>
<div class="carousel-item">Typescript</div>
<div class="carousel-item">VueJS</div>
<div class="carousel-item">Angular</div>
<div class="carousel-item">NextJS</div>
<!-- Duplicato per continuità -->
<div class="carousel-item">React</div>
<div class="carousel-item">Typescript</div>
<div class="carousel-item">Angular</div>
<div class="carousel-item">Vue</div>
<div class="carousel-item">NextJS</div>
</div>
</div>
</body>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.carousel {
position: relative;
overflow: hidden;
width: 100%;
max-width: 800px;
height: 150px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.carousel-track {
display: flex;
animation: scroll 15s linear infinite;
}
.carousel-item {
flex: 0 0 auto;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
font-weight: 600;
font-style: italic;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.carousel-track::after {
content: "";
display: flex;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.