Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
Slider
.logos-slider { display: flex; flex-wrap: nowrap; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,0) 0,#000 15%,#000 85%,rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg,rgba(0,0,0,0) 0,#000 15%,#000 85%,rgba(0,0,0,0) 100%); } .logos-slider-container { display: flex; align-items: center; justify-content: center; gap: 5rem; animation: slide 30s linear infinite; } .logos-slider-container img { width:150px; max-width: 150px; } @keyframes slide { 0% { transform: translate3d(0,0,0) } 100% { transform: translate3d(-100%,0,0) } } h1 { text-align: center; font-family: 'Lato'; color: #3D4A54; } .card { background: white; padding: 2rem; border-radius: 1rem; max-width: 900px; margin: 0 auto; box-shadow: 0px 3px 8px rgb(61 74 84 / 10%), 0px 3px 12px rgb(61 74 84 / 6%) } body { padding-top: 4rem; background: #eef2f5; display:flex; align-items: center; flex-direction: column; justfiy-content: center; }
49
CodePen Home Pure CSS Logo Slider Responsive
By:
pixeldev