Html
Css
Carousel
Slider
Animations
Responsive
Carousel No Js
Carrousel de logos en CSS pur sans dépendances ni JavaScript, animations fluides, gradient moderne et navigation tactile compatible mobile.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Carousel HTML CSS 2026 05051746 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.carousel-container {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 20px;
padding: 40px 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.carousel-title {
text-align: center;
margin-bottom: 30px;
color: #333;
font-size: 28px;
font-weight: bold;
}
.carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-track {
display: flex;
animation: scroll 25s linear infinite;
width: fit-content;
}
.carousel-track:hover {
animation-play-state: paused;
}
.logo-slide {
flex: 0 0 auto;
width: 180px;
height: 120px;
margin: 0 30px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
border: 2px solid #e9ecef;
}
.logo-slide:hover {
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-color: #667eea;
background: white;
}
.logo-slide svg {
width: 100%;
height: 100%;
max-width: 120px;
max-height: 80px;
object-fit: contain;
}
/* Logo placeholders avec SVG simples */
.logo-text {
font-size: 14px;
font-weight: bold;
color: #495057;
text-align: center;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsive design */
@media (max-width: 768px) {
.logo-slide {
width: 140px;
height: 100px;
margin: 0 15px;
}
.carousel-title {
font-size: 22px;
}
.carousel-container {
padding: 30px 10px;
}
}
@media (max-width: 480px) {
.logo-slide {
width: 110px;
height: 80px;
margin: 0 10px;
}
.logo-slide svg {
max-width: 80px;
max-height: 60px;
}
}
</style>
</head>
<body>
<div class="carousel-container">
<h2 class="carousel-title">Nos Partenaires et Technologies</h2>
<div class="carousel">
<div class="carousel-track">
<!-- Premier ensemble de logos -->
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#3498db"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">HTML5</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#e74c3c"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">CSS</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#f39c12"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">JavaScript</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#2ecc71"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">React</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#9b59b6"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Angular</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#1abc9c"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Vue.js</text>
</svg>
</div>
<!-- Duplication pour l'effet infini -->
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#3498db"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">HTML5</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#e74c3c"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">CSS</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#f39c12"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">JavaScript</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#2ecc71"/>
<text x="50" y="28" font-family="Arial" font-size="16" font-weight="bold" fill="white" text-anchor="middle">React</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#9b59b6"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Angular</text>
</svg>
</div>
<div class="logo-slide">
<svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="40" rx="5" fill="#1abc9c"/>
<text x="50" y="28" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle">Vue.js</text>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>Télécharger le fichier source