About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
2022
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> </head> <body> <h1>2022</h1> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Moo+Lah+Lah&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Shizuru&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap'); *, body { background-color: black; margin: 0; overflow: hidden; } h1 { text-shadow: 0px 3px 10px blue; color: hotpink; font-size: 90px; position: absolute; left: 50%; transform: translate(-50%,-50%); top: 50%; font-family: Moo Lah Lah; animation-name: blue-pink, launch, purple-green, launch, green-purple, launch; animation-duration: 2s, .5s, 2s, .5s, 2s, .5s; animation-iteration-count: 3, 3, 3, 3, 3, 3; animation-delay: 0s, 6s, 8s, 14s, 16s, 24s; } @keyframes blue-pink { from { text-shadow: 0px 3px 10px blue; color: pink; font-family: Moo Lah Lah; } to { text-shadow: 0px 3px 10px hopink; color: blue; font-family: Shizuru; } } @keyframes launch { 0% { left: 0%; font-family: Shizuru; color: hotpink; } 50% { left: 50%; font-family: Special Elite; color: blue; } 100% { left: 100%; font-family: Moo Lah Lah; color: white; } } @keyframes purple-green { from { text-shadow: 0px 3px 10px purple; color: green; font-family: Moo Lah Lah; } to { text-shadow: 0px 3px 10px green; color: purple; font-family: Audiowide; } } @keyframes green-purple { from { text-shadow: 0px 3px 10px green; color: purple; font-family: Moo Lah Lah; } to { text-shadow: 0px 3px 10px purple; color: green; font-family: Carter One; } }