Marquee infini uniquement en CSS

2,213 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 March 2026

Metehan

22 September 2025

Jeu de cube 3D HTML avec statistiques et personnalisation

17 April 2026

Modèle HTML de site web de films

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="carousel-wrapper">
  <div class="carousel">
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    <div class="item"><img src="https://logo.clearbit.com/facebook.com" alt="Facebook"></div>
    <div class="item"><img src="https://logo.clearbit.com/netflix.com" alt="Netflix"></div>
    <div class="item"><img src="https://logo.clearbit.com/tesla.com" alt="Testla"></div>
    <div class="item"><img src="https://logo.clearbit.com/nike.com" alt="Nike"></div>
    <div class="item"><img src="https://logo.clearbit.com/adidas.com" alt="Addidas"></div>
    <div class="item"><img src="https://logo.clearbit.com/coca-cola.com" alt="Coca-Cola"></div>
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    
  </div>
</div>  
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  --bg-clr: #000000;
}
body {
  min-height: 100svh;
  display: grid;
  place-content: center;
  background-color: var(--bg-clr);
}

.carousel-wrapper {
  --width: 100px;
  --gap: 0;
  --num-items: 10;
  --ani-offset: calc(var(--width) * var(--num-items) * -1);
  --ani-speed: 10s;
  
  width: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-wrapper::before,
.carousel-wrapper::after{
  content: '';
  position: absolute;
  width: 20%;
  height: 100%;
  z-index: 1;
  top: 0;
}
.carousel-wrapper::before{
  left: 0;
  background-image: linear-gradient(to right,var(--bg-clr) 0%,transparent 50%);
}
.carousel-wrapper::after{
  right: 0;
  background-image: linear-gradient(to left,var(--bg-clr) 0%,transparent 50%);
}

.carousel {
  display: flex;
  align-items: center;
  animation: slide var(--ani-speed) linear infinite;
}
.item{
  flex: 1 0 var(--width);
  text-align: center;
  padding:1rem;
}
.item:last-child{
}
.item > img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes slide {
  100% {
    transform: translateX(var(--ani-offset));
  }
}