这是前端挑战赛 - 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>
下面是该项目的预览图：
旅行
创作“冬至魔法”是一个令人兴奋且充满挑战的过程。以下是我的旅程概述：
想法
我想通过身临其境的网络体验将冬至的美丽和神秘带入生活。该项目的灵感来自冬季的自然元素以及这个季节宁静而充满活力的氛围。
使用的技术
- 基本结构的 html。
- 用于动画、渐变和样式的 css。
- 用于动态交互的 javascript，包括雪花、星星和彗星的生成。
- google fonts 使用“cinzel decorative”字体增强标题文本的美感。
主要特点
动态背景： 天空在渐变之间平滑过渡，以模仿一天中的不同时间。
互动元素： 星星闪烁、雪花飘落、彗星划过屏幕，为场景增添生机。
节日详情： 闪烁的灯光和炽热的火焰增强了季节的魅力。
辅助功能： 该项目的设计具有视觉吸引力且轻量级，确保其跨设备无缝运行。
挑战和经验教训
其中一项挑战是优化动画以确保在各种设备上的流畅性能。我学到了很多关于使用 css 和 javascript 管理动画性能的知识。我特别自豪的是多个动画元素的无缝集成，而不影响页面的响应能力。
下一步是什么
未来，我希望：
添加音频元素，例如微妙的冬季主题背景音乐或音效。
引入用户交互性，允许观看者自定义场景的各个方面。
将项目扩展为具有不同季节主题的系列。
执照
该项目的代码已获得 mit 许可证的许可，使其免费开放给任何人使用或改编。
致谢
特别感谢 dev 社区主办本次挑战并通过他们的平台提供灵感。感谢您考虑我的提交！我希望您喜欢“冬至魔法。”
