魔法冬境－冬至之旅

這是前端挑戰賽 - 12 月版的提交，Glam Up My Markup：冬至

註： 在這個專案的開發過程中，我注意到冬至的主題也啟發了其他挑戰者。這突顯了這個季節的自然和魔力是多麼鼓舞人心。我的靈感來自於我個人對冬天的憧憬，注重細節並詮釋它的魅力。我希望這個專案能夠為這項挑戰中的想法多樣性做出貢獻。

我建造了什麼

「冬至魔法」是一個互動式網路場景，旨在捕捉冬至的本質和魅力。該項目具有太陽、月亮、星星、北極光、飄落的雪花等動畫元素，以及其他節日元素，如發光的火焰、閃爍的燈光和射出的彗星。目標是創造一種視覺上引人入勝的體驗，讓觀眾沉浸在冬季的魔力中，同時展示現代網路技術的力量。

示範

您可以在這裡現場體驗該專案：冬至魔法演示

完整的程式碼可以在這裡：

    
    
    <title>冬至場景</title>
    
        身體 {
            保證金：0；
            溢出：隱藏；
            背景：線性漸層（到底部，#003366，#000）；
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
            顏色: 白色;
            字體系列：Arial、無襯線字體；
        }

        .天空{
            位置：絕對；
            頂部：0；
            左：0；
            寬度：100%；
            高度：100%；
            背景：線性漸變（到頂部，#1e3c72，#2a5298）；
            z 索引：-1；
            動畫：skyTransition 20s無限交替；
        }

        。太陽 {
            位置：絕對；
            寬度：80px；
            高度：80像素；
            背景：徑向漸層（圓形，#ffcc00，#ff9900）；
            邊界半徑：50%；
            動畫：moveSun 8s 無限；
            z 索引：1；
        }

        。月亮 {
            位置：絕對；
            寬度：60 像素；
            高度：60 像素；
            背景：徑向漸層（圓，#ffffff，#cccccc）；
            邊界半徑：50%；
            動畫：moveMoon 8s 無限；
            z 索引：1；
            不透明度：0.8；
        }

        .星星{
            位置：絕對；
            頂部：0；
            左：0；
            寬度：100%；
            高度：100%；
            指針事件：無；
            z 索引：0；
        }

        。星星 {
            位置：絕對；
            寬度：3px；
            高度：3px；
            背景：白色；
            邊界半徑：50%；
            不透明度：0；
            動畫：閃爍3秒無限；
        }

        .極光{
            位置：絕對；
            頂部：0；
            左：0；
            寬度：100%；
            高度：100%；
            背景：徑向漸層（圓形，rgba（0,255,150,0.3），透明）；
            不透明度：0.4；
            動畫：auroraEffect 10s無限交替；
            z 索引：-1；
        }

        .彗星{
            位置：絕對；
            寬度：10px；
            高度：10px；
            背景：徑向漸層（圓形，#ffffff，透明）；
            邊界半徑：50%；
            框陰影：0 0 10px 5px #ffffff；
            不透明度：0.8；
            動畫：flyComet 6s 無限；
        }

        .light-string {
            位置：絕對；
            底部：10%；
            寬度：100%；
            顯示：柔性；
            justify-content：空間均勻；
        }。光 {
            寬度：15 像素；
            高度：15px；
            背景：紅色；
            邊界半徑：50%；
            動畫：blinkLight 2s無限交替；
        }

        。標題 {
            位置：絕對；
            頂部：50%；
            左：50%；
            變換：翻譯（-50%，-50%）；
            字體大小：3.5rem；
            font-family: 'Cinzel Decorative'，草書；
            顏色：#ffddcc；
            文字陰影：3px 3px 10px #000；
            不透明度：0；
            動畫：fadeInOut 10s 無限；
        }

        。火 {
            位置：絕對；
            底部：5%；
            左：50%；
            變換：translateX(-50%)；
            寬度：50px；
            高度：100px；
            背景：徑向漸層(圓形, rgba(255, 165, 0, 1), rgba(255, 69, 0, 0.7));
            邊界半徑：50%；
            動畫：無限閃爍0.5s；
        }

        @關鍵影格閃爍{
            0%, 100% {
                變換：縮放（1）；
                不透明度：0.8；
            }
            50% {
                變換：縮放（1.2）；
                不透明度：1；
            }
        }

        。樹 {
            位置：絕對；
            底部：10%；
            左： calc(10% var(--position, 0%));
            寬度：40px；
            高度：60 像素；
            背景：線性漸層（到底部，#228B22，#006400）；
            剪輯路徑：多邊形（50% 0%、0% 100%、100% 100%）；
        }

        @keyframes fadeInOut {
            0%, 100% {
                不透明度：0；
            }
            50% {
                不透明度：1；
            }
        }

        @keyframes moveSun {
            0% {
                頂部：80%；
                左：10%；
            }
            50% {
                頂部：20%；
                左：50%；
            }
            100% {
                頂部：80%；
                左：90%；
            }
        }

        @keyframes moveMoon {
            0% {
                頂部：20%；
                左：90%；
            }
            50% {
                頂部：10%；
                左：50%；
            }
            100% {
                頂部：20%；
                左：10%；
            }
        }

        @keyframes skyTransition {
            0% {
                背景：線性漸變（到頂部，#1e3c72，#2a5298）；
            }
            50% {
                背景：線性漸變（到頂部，#000428，#004e92）；
            }
            100% {
                背景：線性漸變（到頂部，#2c3e50，#4ca1af）；
            }
        }

        @關鍵影格閃爍{
            0%, 100% {
                不透明度：0；
            }
            50% {
                不透明度：1；
            }
        }

        @keyframes auroraEffect {
            0% {
                變換：translateX(-20px) 縮放(1.2)；
            }
            100% {
                變換：translateX(20px) 縮放(1.5)；
            }}

        @keyframes 飛彗星 {
            0% {
                頂部：-10%；
                左：110%；
            }
            100% {
                上：110%；
                左：-10%；
            }
        }

        @keyframes眨眼燈{
            0% {
                背景：紅色；
            }
            100% {
                背景：黃色；
            }
        }

    風格>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel%20%E8%A3%9D%E9%A3%BE:wght@400;700&display=swap" rel="stylesheet">
頭>

    <div>



<p>以下是該專案的預覽圖：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173527873830508.jpg" class="lazy" alt="Enchanted Winter Realms - A Journey Through the Solstice"></p>

<h2>
  
  
  旅行
</h2>

<p>創作「冬至魔法」是一個令人興奮且充滿挑戰的過程。以下是我的旅程概述：</p>

<h2>
  
  
  想法
</h2>

<p>我想透過身臨其境的網路體驗將冬至的美麗和神秘帶入生活。該項目的靈感來自冬季的自然元素以及這個季節寧靜而充滿活力的氛圍。 </p>

<h2>
  
  
  使用的技術
</h2>

<ul>
<li>基本結構的 HTML。 </li>
<li>用於動畫、漸層和樣式的 CSS。 </li>
<li>用於動態互動的 JavaScript，包括雪花、星星和彗星的生成。 </li>
<li>Google Fonts 使用「Cinzel Decorative」字體增強標題文字的美感。 </li>
</ul>

<h2>
  
  
  主要特點
</h2>

<p><strong>動態背景：</strong> <em>天空在漸變之間平滑過渡，以模仿一天中的不同時間。 </em></p>

<p><strong>互動元素：</strong> <em>星星閃爍、雪花飄落、彗星劃過螢幕，為場景增添生氣。 </em></p>

<p><strong>節慶詳情：</strong> <em>閃爍的燈光和熾熱的火焰增強了季節的魅力。 </em></p>

<p><strong>輔助功能：</strong> <em>專案的設計具有視覺吸引力且輕量級，確保其跨裝置無縫運作。 </em></p>

<h2>
  
  
  挑戰和經驗教訓
</h2>

<p>其中一項挑戰是優化動畫以確保在各種裝置上的流暢性能。我學到了很多關於使用 CSS 和 JavaScript 管理動畫效能的知識。我特別自豪的是多個動畫元素的無縫集成，而不影響頁面的回應能力。 </p>

<h2>
  
  
  下一步是什麼
</h2>

<p>未來，我希望：</p>

<p>加入音訊元素，例如微妙的冬季主題背景音樂或音效。 </p>

<p>引入使用者互動性，允許觀看者自訂場景的各個方面。 </p>

<p>將項目擴展為具有不同季節主題的系列。 </p>
<h2>
  
  
  執照
</h2>

<p>該項目的代碼已獲得 MIT 許可證的許可，使其免費開放給任何人使用或改編。 </p>

<h2>
  
  
  致謝
</h2>

<p>特別感謝 <strong>DEV 社群</strong>主辦這次挑戰並透過他們的平台提供靈感。感謝您考慮我的提交！我希望您喜歡「<strong><em>冬至魔法</em></strong>。」</p>


          </div>

            
        

以上是魔法冬境－冬至之旅的詳細內容。更多資訊請關注PHP中文網其他相關文章！