Skip to content

Instantly share code, notes, and snippets.

@antxd

antxd/customer_logos_infinite.html

Last active July 27, 2020 19:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save antxd/b334b6e62233c81c5ada733f1f46cfcc to your computer and use it in GitHub Desktop.
Save antxd/b334b6e62233c81c5ada733f1f46cfcc to your computer and use it in GitHub Desktop.
Download ZIP
Customer Logos Infinite Scroll Only CSS
Raw
customer_logos_infinite.html
<!DOCTYPE html>
<html>
<head>
<!--
Dev by: Lihex Andrade 27/07/2020
Demo: https://codepen.io/antxd/pen/gOPJpbW
-->
<title>Customer Logos Infinite Scroll Only CSS</title>
<style>
.slider {
width: 2179px;
margin: auto;
overflow: visible;
}
.slider ul {
display: flex;
padding: 0;
animation: cambio 80s infinite linear;
}
.slider li {
padding:0 10px;
list-style: none;
}
.slider img {
max-width: fit-content !important;
height: auto !important;
}
@keyframes cambio {
from {margin-left: 0%}
to {margin-left: -100%}
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li>
<img src="https://via.placeholder.com/200?text=Logo%201" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%202" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%203" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%204" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%205" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%206" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%207" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%208" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%209" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2010" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2011" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2012" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2013" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2014" alt="">
</li>
<li>
<img src="https://via.placeholder.com/200?text=Logo%2015" alt="">
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment