WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html> <head> <title>Text Animation</title> </head> <body> <h1> <span style="--i: 1">C</span> <span style="--i: 2">O</span> <span style="--i: 3">D</span> <span style="--i: 4">I</span> <span style="--i: 5">N</span> <span style="--i: 6">G</span> </h1> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Indie+Flower&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } body { background: #111; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: 'Fredoka One', impact; } h1 { font-size: 70px; color: rgb(200,200,210); height: 100px; } span { position: relative; top: 40px; animation: move 0.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 0.15s); } @keyframes move { 100%{ top: -30px; text-shadow: 0 3px red, 0 6px grey, 0 9px gold, 0 11px green, 0 13px purple, 0 14px cyan, 0 15px orangered; } }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html> <head> <title>Text Animation</title> </head> <body> <h1> <span style="--i: 1">C</span> <span style="--i: 2">O</span> <span style="--i: 3">D</span> <span style="--i: 4">I</span> <span style="--i: 5">N</span> <span style="--i: 6">G</span> </h1> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Indie+Flower&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } body { background: #111; display: flex; align-items: center; justify-content: center; height: 100vh; font-family: 'Fredoka One', impact; } h1 { font-size: 70px; color: rgb(200,200,210); height: 100px; } span { position: relative; top: 40px; animation: move 0.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 0.15s); } @keyframes move { 100%{ top: -30px; text-shadow: 0 3px red, 0 6px grey, 0 9px gold, 0 11px green, 0 13px purple, 0 14px cyan, 0 15px orangered; } }
/* Replace with your JS Code (Leave empty if not needed) */