<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
* { box-sizing: border-box; }
ul { margin:0 auto; max-width: 300px; height: 100px; position: relative; display: flex; padding: 20px ; width: 100%; height: 100px; justify-content: space-between; filter: blur(10px);}
ul li { display: inline-block; width: 60px; height: 60px; background: #000; border-radius: 99em; }
ul li:nth-child(1) { position: absolute; top: 20px; left: 0; animation: an 15s ease infinite; background: red; }
@keyframes an {
0% { left: 5%; }
50% { left: 70%; }
100% { left: 5%; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.