当前位置：首页 > 文章列表 > 文章 > 前端 > 魔法冬境——冬至之旅

魔法冬境——冬至之旅

来源：dev.to 2024-12-24 14:18:51 0浏览收藏

golang学习网今天将给大家带来《魔法冬境——冬至之旅》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

这是前端挑战赛 - 12 月版的提交，glam up my markup：冬至

注：在这个项目的开发过程中，我注意到冬至的主题也启发了其他挑战者。这突显了这个季节的自然和魔力是多么鼓舞人心。我的灵感来自于我个人对冬天的憧憬，注重细节并诠释它的魅力。我希望这个项目能够为这一挑战中的想法多样性做出贡献。

我建造了什么

“冬至魔法”是一个交互式网络场景，旨在捕捉冬至的本质和魅力。该项目具有太阳、月亮、星星、北极光、飘落的雪花等动画元素，以及其他节日元素，如发光的火焰、闪烁的灯光和射出的彗星。目标是创造一种视觉上引人入胜的体验，让观众沉浸在冬季的魔力中，同时展示现代网络技术的力量。

演示

您可以在这里现场体验该项目：冬至魔法演示

完整的代码可以在这里：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Winter Solstice Scene</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #003366, #000);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            font-family: Arial, sans-serif;
        }

        .sky {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #1e3c72, #2a5298);
            z-index: -1;
            animation: skyTransition 20s infinite alternate;
        }

        .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, #ffcc00, #ff9900);
            border-radius: 50%;
            animation: moveSun 8s infinite;
            z-index: 1;
        }

        .moon {
            position: absolute;
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #ffffff, #cccccc);
            border-radius: 50%;
            animation: moveMoon 8s infinite;
            z-index: 1;
            opacity: 0.8;
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .star {
            position: absolute;
            width: 3px;
            height: 3px;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: twinkle 3s infinite;
        }

        .aurora {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(0, 255, 150, 0.3), transparent);
            opacity: 0.4;
            animation: auroraEffect 10s infinite alternate;
            z-index: -1;
        }

        .comet {
            position: absolute;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, #ffffff, transparent);
            border-radius: 50%;
            box-shadow: 0 0 10px 5px #ffffff;
            opacity: 0.8;
            animation: flyComet 6s infinite;
        }

        .light-string {
            position: absolute;
            bottom: 10%;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
        }

        .light {
            width: 15px;
            height: 15px;
            background: red;
            border-radius: 50%;
            animation: blinkLight 2s infinite alternate;
        }

        .title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3.5rem;
            font-family: 'Cinzel Decorative', cursive;
            color: #ffddcc;
            text-shadow: 3px 3px 10px #000;
            opacity: 0;
            animation: fadeInOut 10s infinite;
        }

        .fire {
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 165, 0, 1), rgba(255, 69, 0, 0.7));
            border-radius: 50%;
            animation: flicker 0.5s infinite;
        }

        @keyframes flicker {
            0%, 100% {
                transform: scale(1);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        .tree {
            position: absolute;
            bottom: 10%;
            left: calc(10% + var(--position, 0%));
            width: 40px;
            height: 60px;
            background: linear-gradient(to bottom, #228B22, #006400);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes moveSun {
            0% {
                top: 80%;
                left: 10%;
            }
            50% {
                top: 20%;
                left: 50%;
            }
            100% {
                top: 80%;
                left: 90%;
            }
        }

        @keyframes moveMoon {
            0% {
                top: 20%;
                left: 90%;
            }
            50% {
                top: 10%;
                left: 50%;
            }
            100% {
                top: 20%;
                left: 10%;
            }
        }

        @keyframes skyTransition {
            0% {
                background: linear-gradient(to top, #1e3c72, #2a5298);
            }
            50% {
                background: linear-gradient(to top, #000428, #004e92);
            }
            100% {
                background: linear-gradient(to top, #2c3e50, #4ca1af);
            }
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes auroraEffect {
            0% {
                transform: translateX(-20px) scale(1.2);
            }
            100% {
                transform: translateX(20px) scale(1.5);
            }
        }

        @keyframes flyComet {
            0% {
                top: -10%;
                left: 110%;
            }
            100% {
                top: 110%;
                left: -10%;
            }
        }

        @keyframes blinkLight {
            0% {
                background: red;
            }
            100% {
                background: yellow;
            }
        }

    </style>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="sky"></div>
    <div class="aurora"></div>
    <div class="sun"></div>
    <div class="moon"></div>
    <div class="stars"></div>
    <div class="light-string">
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
        <div class="light"></div>
    </div>
    <div class="title">Winter Solstice Magic</div>
    <div class="fire"></div>
    <div class="tree" style="--position: 10%;"></div>
    <div class="tree" style="--position: 30%;"></div>
    <div class="tree" style="--position: 70%;"></div>
    <script>
        // Add twinkling stars
        const starContainer = document.querySelector('.stars');
        for (let i = 0; i < 100; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.top = `${Math.random() * 100}%`;
            star.style.left = `${Math.random() * 100}%`;
            star.style.animationDelay = `${Math.random() * 5}s`;
            starContainer.appendChild(star);
        }

        // Create a comet
        const createComet = () => {
            const comet = document.createElement('div');
            comet.classList.add('comet');
            comet.style.top = `-${Math.random() * 50}px`;
            comet.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(comet);

            setTimeout(() => comet.remove(), 6000);
        };

        setInterval(createComet, 8000);

        // Interactive snow effect
        const createSnowflake = () => {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.position = 'absolute';
            snowflake.style.top = `-5px`;
            snowflake.style.left = `${Math.random() * window.innerWidth}px`;
            snowflake.style.width = snowflake.style.height = `${Math.random() * 5 + 2}px`;
            snowflake.style.background = 'white';
            snowflake.style.borderRadius = '50%';
            snowflake.style.opacity = `${Math.random() * 0.8 + 0.2}`;
            snowflake.style.transition = 'top 3s linear';
            document.body.appendChild(snowflake);

            setTimeout(() => {
                snowflake.style.top = `${window.innerHeight + 10}px`;
            }, 50);

            setTimeout(() => {
                snowflake.remove();
            }, 3000);
        };

        setInterval(createSnowflake, 150);
    </script>
</body>
</html>

下面是该项目的预览图：

image description