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: #111; min-height: 100vh; display: grid; place-items: center; } .container { width: 40em; height: 30em; background-color: #000; outline: 1px solid #fff; display: grid; place-items: center; perspective: 800px; overflow: hidden; *:not(:empty) { transform-style: preserve-3d; } } .scene { --duration: 12s; position: relative; animation: scene calc(var(--duration) * 3) linear infinite; } @keyframes scene { from { transform: rotateZ(-30deg) rotateY(30deg) rotateX(0deg); } to { transform: rotateZ(-30deg) rotateY(30deg) rotateX(360deg); } } .link { --linkDelay: calc(var(--duration) / -5 * var(--l)); position: absolute; inset: -1em -6em; transform-origin: 50% -2em; animation: linkMove var(--duration) var(--linkDelay) ease-out infinite, linkRotate var(--duration) var(--linkDelay) linear infinite; div { position: absolute; width: 2em; height: 100%; } .front, .front div { --_delay: calc(var(--linkDelay) - (var(--duration) / 96 * var(--d, 0))); left: 100%; transform-origin: bottom left; animation: front var(--duration) var(--_delay) ease-in-out infinite; } .back, .back div { right: 100%; transform-origin: bottom right; animation: back var(--duration) var(--linkDelay) ease-in-out infinite; } .back .last { width: 10em; } i { position: absolute; inset: 0; background-color: hsl(calc(var(--l) * 72) 100% var(--light, 80%)); background-image: linear-gradient(#0007, 5%, #0000), linear-gradient(0deg, #0007, 5%, #0000); &:nth-child(1) { transform: translateZ(1em); } &:nth-child(2) { transform: rotateX(90deg) translateZ(1em); --light: 70%; } &:nth-child(3) { transform: rotateX(180deg) translateZ(1em); } &:nth-child(4) { transform: rotateX(270deg) translateZ(1em); --light: 82%; } } } @keyframes linkMove { 0% { translate: -50em 2.5em; } 20% { translate: 0em 2.5em; animation-timing-function: linear; } 100% { translate: 50em 2.5em; } } @keyframes linkRotate { from { rotate: x 0deg; } to { rotate: x 360deg; } } @keyframes front { 0%, 15% { rotate: 0deg; } 20%, 100% { rotate: -30deg; } } @keyframes back { 0%, 10% { rotate: 0deg; } 30%, 100% { rotate: 30deg; } }
console.log("Event Fired")