Colored Rings
Home
Snippets
Colored Rings
HTML
CSS
JS
<div class="ring"> <i style="--clr:#00ff0a;"></i> <i style="--clr:#ff0057;"></i> <i style="--clr:#fffd44;"></i> </div>
body { margin: 0; display: grid; place-items: center; height: 100vh; background: #111; } .ring { position: relative; width: 150px; height: 150px; } .ring i { position: absolute; inset: 0; border: 2px solid #fff; transition: 0.5s; } .ring i:nth-child(1) { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; animation: animate 6s linear infinite; } .ring i:nth-child(2) { border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%; animation: animate 4s linear infinite; } .ring i:nth-child(3) { border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%; animation: animate2 10s linear infinite; } .ring:hover i { border: 6px solid var(--clr); filter: drop-shadow(0 0 20px var(--clr)); } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top