Portal Energy Ring
Home
Snippets
Portal Energy Ring
HTML
CSS
JS
<div class="portal"> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> <div class="core"></div> </div>
body{ margin:0; height:100vh; display:flex; justify-content:center; align-items:center; background:#020617; overflow:hidden; } .portal{ position:relative; width:250px; height:250px; } .ring{ position:absolute; width:100%; height:100%; border-radius:50%; border:3px solid transparent; border-top:3px solid #38bdf8; border-left:3px solid #a855f7; animation:spin 3s linear infinite; } .ring:nth-child(2){ width:180px; height:180px; top:35px; left:35px; animation-direction:reverse; } .ring:nth-child(3){ width:110px; height:110px; top:70px; left:70px; border-top-color:#22c55e; border-left-color:#f59e0b; } .core{ position:absolute; width:40px; height:40px; background:#38bdf8; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow: 0 0 20px #38bdf8, 0 0 40px #38bdf8, 0 0 80px #38bdf8; } @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
//javascript
Ad #1
Ad #2
Scroll to Top