suchen

Heim >Web-Frontend >js-Tutorial >Fröhliche Dusshera-Animation

Fröhliche Dusshera-Animation

Barbara Streisand
Barbara StreisandOriginal
2024-10-12 20:32:02408Durchsuche

Happy Dusshera Animation

Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>

<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>

</body>
</html>

Das obige ist der detaillierte Inhalt vonFröhliche Dusshera-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

animation
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Deno Was ist neu und warum Sie sich darum kümmern sollten!!Nächster Artikel：Deno Was ist neu und warum Sie sich darum kümmern sollten!!

In Verbindung stehende Artikel

Mehr sehen