Rotating Squares
Home
Snippets
Rotating Squares
HTML
CSS
JS
<div class="spinner-box"> <div class="border-1"> <div class="core"></div> </div> <div class="border-2"> <div class="core"></div> </div> </div>
body { min-height: 100vh; background-color: #2a1d30; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .border-1 { width: 115px; height: 115px; padding: 3px; position: absolute; background: #fbf553; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; } .border-2 { width: 115px; height: 115px; padding: 3px; left: -115px; background: #3ff961; transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; } .core { width: 100%; height: 100%; background-color: #2a1d30; } @keyframes configure-clockwise { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes configure-xclockwise { 0% { transform: rotate(45deg); } 50% { transform: rotate(-135deg); } 100% { transform: rotate(-315deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top