WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS only infinate marquee
1762
Andev.web
Open In Editor
Publish Your Code
Recommended
10 October 2025
CSS Animation Fragments Container
4 November 2024
homepage for a portfolio site
13 September 2025
CSS Loading Animation: Ellipse Loader
HTML
Copy
Andev Web
CSS
Copy
*{ 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)); } }
JS
Copy