<div class="g-container"> <div class="g-ball"></div> </div> .g-container { position: relative; width: 10vmin; height: 70vmin; transform-origin: center 0; animation: rotate 1.5s infinite alternate; } .g-ball { position: absolute; width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient(circle, #fff, #000); bottom: 0; left: 0; } @keyframes rotate { 100% { transform: rotate(90deg); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter