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; } *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 800px; overflow: hidden; *:not(:empty) { transform-style: preserve-3d; } } .scene { position: relative; animation: sceneRotate 42s infinite linear; } .floor { position: absolute; inset: -60em; background-color: #141; background-image: radial-gradient(closest-side, transparent, #000), radial-gradient(Black, 1%, transparent), repeating-linear-gradient(0deg, transparent 0, #0001, transparent 1em), repeating-linear-gradient(60deg, transparent 0, #0001, transparent 1em), repeating-linear-gradient(120deg, transparent 0, #0001, transparent 1em); transform: rotateX(90deg); } .flower { position: absolute; } .petal { position: absolute; left: -1em; top: 0; width: 2em; height: 0; animation: petalScale 8s calc(-8s / 36 * var(--p)) infinite; --background-color: hsl(calc(var(--p) * 10) 80% 50%); i { position: absolute; left: 0; bottom: 100%; width: 2em; height: 2em; background-image: linear-gradient(45deg, transparent 5em, var(--background-color) 15em); background-size: 100% 20em; transform-origin: bottom; animation: petal 8s calc(-8s / 36 * var(--p)) infinite ease-in-out; i:empty { border-radius: 100% 100% 0 0; } } } @keyframes sceneRotate { from { transform: translateY(5em) rotateX(-30deg) rotateY(0deg); } to { transform: translateY(5em) rotateX(-30deg) rotateY(-360deg); } } @keyframes petalScale { 0% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(0); } 100% { transform: rotateY(calc(var(--p) * 42deg)) rotateX(-90deg) scale(1); } } @keyframes petal { 0% { transform: rotateX(45deg); } 100% { transform: rotateX(0deg); } 0%, 60% { background-position-y: 0; } 100% { background-position-y: 100%; } }
console.log("Event Fired")