Expanding Rings Animation
Home
Snippets
Expanding Rings Animation
HTML
CSS
JS
<div class="ring-container"> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #1b1b1b; } .ring-container { position: relative; width: 100px; height: 100px; } .ring { position: absolute; width: 100%; height: 100%; border: 3px solid #00ffea; border-radius: 50%; animation: pulse 2s infinite ease-in-out; opacity: 0; } .ring:nth-child(2) { animation-delay: 0.5s; border-color: #ff4d6d; } .ring:nth-child(3) { animation-delay: 1s; border-color: #ffc107; } .ring:nth-child(4) { animation-delay: 1.5s; border-color: #40c057; } @keyframes pulse { 0% { transform: scale(0.3); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
//javascript
Ad #1
Ad #2
Scroll to Top