当前位置：首页 > 文章列表 > 文章 > 前端 > 快乐杜谢拉动画

快乐杜谢拉动画

来源：dev.to 2024-10-17 22:42:34 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《快乐杜谢拉动画》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

快乐杜谢拉动画

代码

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

到这里，我们也就讲完了《快乐杜谢拉动画》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除