Circular Animation
Home
Snippets
Circular Animation
HTML
CSS
JS
<div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
html { color: #434343; } body { display: grid; place-items: center; margin: 0; height: 100vh; overflow: hidden; background: #000 radial-gradient(circle, currentcolor, transparent); color: currentcolor; perspective: 80vh; transform-style: preserve-3d; } div { height: 80vmin; aspect-ratio: 1; transform-style: preserve-3d; animation: twirlAnim 8s linear infinite; } @keyframes twirlAnim { to { rotate: 360deg; } } span { position: absolute; top: 50%; left: 50%; display: block; height: 40%; aspect-ratio: 1; background: #fff; transform-origin: 0 0; rotate: calc(sibling-index() * (360deg / sibling-count())); transform: rotatex(1deg); border-radius: 25%; border-bottom-right-radius: 100%; animation: spAnim 5s ease-in-out infinite; } span:nth-child(odd) { background: currentcolor; } @keyframes spAnim { 50% { transform: rotatex(75deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top