Marquee infini uniquement en CSS

1125 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 December 2023

Page d'accueil de café

21 January 2025

CodePen Accueil Étoiles et vitesse de distorsion

27 June 2025

Esprit créatif : blog, podcast, créativité, technologie

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

Recommandé

Page d'accueil de café

CodePen Accueil Étoiles et vitesse de distorsion

Esprit créatif : blog, podcast, créativité, technologie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS