Orbits

HAML
.wrapper - 10.times do .ring
CSS
body { background-color: #1D1F20; background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #1D1F20 0%, #1D1F20 50%) 0 / 15px 15px; overflow: hidden; margin: 120px 0 0 275px; } .wrapper { position: relative; height:425px; width: 475px; margin: auto; } .ring { position: absolute; top: 30%; left: 20%; transform: translate(-50%, -50%); transform-origin: center; border-radius: 50%; box-sizing: border-box; animation: orbit 20s infinite linear; } .ring:nth-child(1) { width: 20px; height: 20px; box-shadow: 0 0 20px #00ffff; } .ring:nth-child(2) { width: 40px; height: 80px; box-shadow: 0 0 30px #fff; animation-duration: 10s; } .ring:nth-child(3) { width: 80px; height: 120px; box-shadow: 0 0 30px #0000ff; animation-duration: 6.66667s; } .ring:nth-child(4) { width: 160px; height: 160px; box-shadow: 0 0 30px #fff; animation-duration: 5s; } .ring:nth-child(5) { width: 320px; height: 200px; box-shadow: 0 0 30px #800080; animation-duration: 4s; } .ring:nth-child(6) { width: 340px; height: 240px; box-shadow: 0 0 30px #00ffff; animation-duration: 3.33333s; } .ring:nth-child(7) { width: 380px; height: 280px; box-shadow: 0 0 30px #0000ff; animation-duration: 2.85714s; } .ring:nth-child(8) { width: 390px; height: 320px; box-shadow: 0 0 30px #800080; animation-duration: 2.5s; } .ring:nth-child(9) { width: 395px; height: 360px; box-shadow: 0 0 30px #00ffff; animation-duration: 2.22222s; } .ring:nth-child(10) { width: 400px; height: 400px; box-shadow: 0 0 20px #0000ff; animation-duration: 2s; } @keyframes orbit { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
JAVASCRIPT
Expand for more options Login