content{ position: relative; } content:before { animation: rotate 3s linear infinite; border-radius: 100%; box-shadow: 0 3px 0 0 rgba(225,131,194,.25), 0 -3px 0 0 rgba(165,181,222,.25), 3px 0 0 0 rgba(225,131,194,.25), -3px 0 0 0 rgba(165,181,222,.25), 3px -1px 0 0 rgba(195,156,208,.5), -3px 3px 0 0 rgba(195,156,208,.5), 3px 3px 0 0 rgba(255,105,180,.75), -3px -3px 0 0 rgba(135,206,235,.75); content: ""; height: 100%; position: absolute; width: 100%; display: block; /* Added */ transform: translate(-50%, -50%); /* Added */ } @keyframes rotate { 0% { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1); } }
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