Ring and Shadow
Home
Snippets
Ring and Shadow
HTML
CSS
JS
<div class="out_container"> <div class="ring"></div> <div class="ring"></div> </div>
body{ margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } .out_container{ position: fixed; font-size: 1.5vw; perspective: 10em; transform-style: preserve-3d; width: 10em; height: 10em; } .ring{ position: fixed; transform-style: preserve-3d; animation: ringmove 1s infinite linear; width: 100%; height: 100%; border-radius: 50%; } .ring:nth-child(1){ border: solid 1em hsl(240deg,100%,50%); margin-top: -3em; } .ring:nth-child(2){ border: solid 1em hsl(220deg,100%,70%); margin-top: 3em; animation-delay: -0.5s; } @keyframes ringmove{ 0%{transform: rotateX(90deg) rotateZ(0deg) rotateX(30deg)} 100%{transform: rotateX(90deg) rotateZ(360deg) rotateX(30deg)} }
//javascript
Ad #1
Ad #2
Scroll to Top