魔法冬境——冬至之旅-css教程-PHP中文网

首页

web前端

css教程

魔法冬境——冬至之旅

DDD

Dec 27, 2024 pm 01:52 PM

这是前端挑战赛 - 12 月版的提交，Glam Up My Markup：冬至

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

我建造了什么

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

演示

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

完整的代码可以在这里：

<html lang="zh-cn">
<头>
    
    
    <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 装饰: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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn