快乐杜谢拉动画

    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dussehra Animation</title><style>        body {            margin: 0;            padding: 0;            background-color: #0d0d0d;            color: white;            font-family: 'Arial', sans-serif;            overflow: hidden;        }        #jaiShreeRam, #happyDussehra {            font-size: 4rem;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            text-align: center;            animation: glowText 1s infinite alternate;        }        #jaiShreeRam {            opacity: 0;            animation: fadeIn 3s forwards, fadeOut 2s 5s forwards;        }        #happyDussehra {            opacity: 0;            color: #FFD700;            text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red;        }        @keyframes glowText {            0% {                text-shadow: 0 0 10px red, 0 0 20px orange, 0 0 30px yellow;            }            100% {                text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red;            }        }        #ravaan {            display: none;            width: 300px;            height: 500px;            background: url('https://i.pinimg.com/originals/b8/3c/9f/b83c9fadc3e06c9a39e98088d4402318.png') no-repeat center/cover;            position: absolute;            top: 50%;            left: 60%;            transform: translate(-50%, -50%);        }        #ravaan.onFire {            animation: fireShadow 2s forwards, disappear 4s 2s forwards;        }        #arrow {            display: none;            width: 200px;            height: 10px;            background-color: #8b4513;            position: absolute;            top: 55%;            left: -200px;            border-radius: 5px;            animation: moveArrow 5s forwards;        }        #arrow:before {            content: '';            width: 30px;            height: 20px;            background-color: gray;            position: absolute;            right: -30px;            top: -5px;            clip-path: polygon(0 50%, 100% 0, 100% 100%);        }        #fire {            display: none;            width: 50px;            height: 50px;            background: radial-gradient(circle, red, orange, yellow);            border-radius: 50%;            position: absolute;            top: -15px;            right: -35px;            animation: fireFlicker 0.2s infinite alternate;        }        @keyframes fadeIn {            0% { opacity: 0; }            100% { opacity: 1; }        }        @keyframes fadeOut {            0% { opacity: 1; }            100% { opacity: 0; }        }        @keyframes moveArrow {            0% { left: -200px; }            50% { left: 45%; top: 55%; transform: translateX(-50%); }            100% { left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); }        }        @keyframes fireFlicker {            0% { transform: scale(1); opacity: 1; }            100% { transform: scale(1.1); opacity: 0.9; }        }        @keyframes fireShadow {            0% { box-shadow: 0 0 0px transparent; }            100% { box-shadow: 0 0 30px orange, 0 0 50px red, 0 0 70px yellow; }        }        @keyframes disappear {            0% { opacity: 1; }            100% { opacity: 0; }        }        @keyframes explode {            0% { transform: scale(1); opacity: 1; }            100% { transform: scale(5); opacity: 0; }        }        .cracker {            display: none;            position: absolute;            width: 10px;            height: 10px;            background-color: yellow;            animation: explode 1s forwards;            border-radius: 50%;        }        .cracker:before {            content: '';            position: absolute;            width: 100%;            height: 100%;            border-radius: 50%;            background: radial-gradient(circle, red, orange, yellow);            animation: explode 1s forwards;        }    </style><div id="jaiShreeRam">Jai Shree Ram</div><div id="ravaan"></div><div id="arrow">    <div id="fire"></div></div><div id="happyDussehra">Happy Dussehra</div><script>    let letterIndex = 0;    const jaiShreeRam = document.getElementById('jaiShreeRam');    const ravaan = document.getElementById('ravaan');    const arrow = document.getElementById('arrow');    const fire = document.getElementById('fire');    const happyDussehra = document.getElementById('happyDussehra');    function showJaiShreeRam() {        const text = "Jai Shree Ram";        let interval = setInterval(() => {            if (letterIndex < text.length) {                jaiShreeRam.innerHTML = text.slice(0, ++letterIndex);            } else {                clearInterval(interval);                setTimeout(() => {                    jaiShreeRam.style.display = 'none';                    showRavaan();                }, 2000);            }        }, 300);    }    function showRavaan() {        ravaan.style.display = 'block';        setTimeout(shootArrow, 2000);    }    function shootArrow() {        arrow.style.display = 'block';        fire.style.display = 'block';        setTimeout(() => {            arrow.style.display = 'none'; // Hide the arrow after striking            triggerRavaanFire();        }, 4500); // Adjust the timing so the arrow strikes before triggering the fire    }    function triggerRavaanFire() {        ravaan.classList.add('onFire'); // Apply fire effect to Ravan        showCrackers();        setTimeout(() => {            ravaan.style.display = 'none';            showHappyDussehra();        }, 4000);    }    function showCrackers() {        for (let i = 0; i < 20; i++) {            let cracker = document.createElement('div');            cracker.className = 'cracker';            cracker.style.top = `${Math.random() * window.innerHeight}px`;            cracker.style.left = `${Math.random() * window.innerWidth}px`;            document.body.appendChild(cracker);            cracker.style.display = 'block';            cracker.style.backgroundColor = 'orange';  // Firework color        }    }    function showHappyDussehra() {        happyDussehra.style.opacity = '1';    }    showJaiShreeRam();</script>