128 views
CSS
1.container { 2 position: absolute; 3 top: 40%; 4 height: 90%; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8} 9 10.item { 11 position: absolute; 12 background-color: transparent; 13 width: calc(var(--i) * 2.5vmin); 14 aspect-ratio: 1; 15 border-radius: 50%; 16 border: .9vmin solid rgb(0, 200, 255); 17 transform-style: preserve-3d; 18 transform: rotateX(70deg) translateZ(50px); 19 animation: my-move 3s ease-in-out calc(var(--i) * 0.08s) infinite; 20 box-shadow: 0px 0px 15px rgb(124, 124, 124), 21 inset 0px 0px 15px rgb(124, 124, 124); 22} 23 24@keyframes my-move { 25 0%, 26 100% { 27 transform: rotateX(70deg) translateZ(50px) translateY(0px); 28 filter: hue-rotate(0deg); 29 } 30 31 50% { 32 transform: rotateX(70deg) translateZ(50px) translateY(-50vmin); 33 filter: hue-rotate(180deg); 34 } 35}
HTML
1<div class="container"> 2 <div class="item" style="--i:0;"></div> 3 <div class="item" style="--i:1;"></div> 4 <div class="item" style="--i:2;"></div> 5 <div class="item" style="--i:3;"></div> 6 <div class="item" style="--i:4;"></div> 7 <div class="item" style="--i:5;"></div> 8 <div class="item" style="--i:6;"></div> 9 <div class="item" style="--i:7;"></div> 10 <div class="item" style="--i:8;"></div> 11 <div class="item" style="--i:9;"></div> 12 <div class="item" style="--i:10;"></div> 13 <div class="item" style="--i:11;"></div> 14 <div class="item" style="--i:12;"></div> 15 <div class="item" style="--i:13;"></div> 16 <div class="item" style="--i:14;"></div> 17 <div class="item" style="--i:15;"></div> 18 <div class="item" style="--i:16;"></div> 19 <div class="item" style="--i:17;"></div> 20 <div class="item" style="--i:18;"></div> 21 <div class="item" style="--i:19;"></div> 22 <div class="item" style="--i:20;"></div> 23 </div>