Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { position: absolute; display: flex; width: 100%; height: 100%; margin: 0; justify-content: center; align-items: center; filter: contrast(300%); background-color: #000000; } .flex-container { position: absolute; width: 50vmin; height: 50vmin; border-radius: 50%; overflow: hidden; animation: flexAnim 1000ms linear infinite; } .ball { position: absolute; width: 6vmin; height: 6vmin; background-color: #ffffff; border-radius: 50%; filter: blur(1vmin); box-shadow: 0 0 0.25vmin 0.75vmin #0000ff inset; top: calc(50% - 3vmin); animation: ballAnim 6000ms linear infinite; } @keyframes flexAnim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ballAnim { 0% { left: 0; transform: scale(0); } 10% { left: 0; transform: scale(1); } 90% { left: calc(50% - 3vmin); transform: scale(1); } 100% { left: calc(50% - 3vmin); transform: scale(0); } }
console.log("Event Fired")