WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस
4440
creativewiz
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
8 July 2025
पूर्वावलोकन कार्ड एनीमेशन (सीएसएस स्प्राइट्स) के साथ चरित्र चयन
16 November 2023
सीएसएस ओटीपी पेज
31 August 2024
सीएसएस फ़िल्टर कार्ड
HTML
Copy
<!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>
CSS
Copy
@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; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
