卡通彩色圣诞树

原创已于 2025-06-27 13:14:29 修改 · 337 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-12 12:58:17 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡通彩色圣诞树</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #0a2e38 0%, #000000 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}

.scene {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.tree {
position: relative;
width: 200px;
height: 400px;
margin-top: 100px;
}

.tree-trunk {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 80px;
background: #8B4513;
border-radius: 5px;
z-index: 1;
}

.tree-section {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
left: 50%;
transform: translateX(-50%);
}

.section1 {
bottom: 80px;
border-bottom: 120px solid #2ECC71;
z-index: 5;
animation: glow1 3s infinite alternate;
}

.section2 {
bottom: 160px;
border-bottom: 100px solid #27AE60;
z-index: 4;
animation: glow2 3s infinite alternate 0.5s;
}

.section3 {
bottom: 240px;
border-bottom: 80px solid #1E8449;
z-index: 3;
animation: glow3 3s infinite alternate 1s;
}

.section4 {
bottom: 310px;
border-bottom: 60px solid #186A3B;
z-index: 2;
animation: glow4 3s infinite alternate 1.5s;
}

@keyframes glow1 {
0% { border-bottom-color: #2ECC71; }
100% { border-bottom-color: #F1C40F; }
}

@keyframes glow2 {
0% { border-bottom-color: #27AE60; }
100% { border-bottom-color: #E74C3C; }
}

@keyframes glow3 {
0% { border-bottom-color: #1E8449; }
100% { border-bottom-color: #9B59B6; }
}

@keyframes glow4 {
0% { border-bottom-color: #186A3B; }
100% { border-bottom-color: #3498DB; }
}

.ornament {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 10;
animation: twinkle 2s infinite alternate;
}

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

.ornament1 { top: 100px; left: 50%; background: #E74C3C; animation-delay: 0s; }
.ornament2 { top: 150px; left: 60%; background: #F1C40F; animation-delay: 0.3s; }
.ornament3 { top: 200px; left: 40%; background: #3498DB; animation-delay: 0.6s; }
.ornament4 { top: 250px; left: 55%; background: #9B59B6; animation-delay: 0.9s; }
.ornament5 { top: 300px; left: 45%; background: #E67E22; animation-delay: 1.2s; }
.ornament6 { top: 350px; left: 60%; background: #2ECC71; animation-delay: 1.5s; }

.star {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #F1C40F;
z-index: 10;
animation: starGlow 2s infinite alternate;
}

.star:after {
content: '';
position: absolute;
top: 5px;
left: -15px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid #F1C40F;
}

@keyframes starGlow {
0% { transform: translateX(-50%) scale(1); opacity: 0.8; }
100% { transform: translateX(-50%) scale(1.2); opacity: 1; }
}

.snow {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}

.snowflake {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: snowfall linear infinite;
}

@keyframes snowfall {
0% { transform: translateY(-100px) rotate(0deg); }
100% { transform: translateY(100vh) rotate(360deg); }
}

.link-container {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.7);
padding: 5px 10px;
border-radius: 5px;
}

.link-container a {
color: #2196F3;
text-decoration: none;
font-size: 12px;
}
</style>
</head>
<body>
<div class="scene">
<div class="tree">
<div class="tree-trunk"></div>
<div class="tree-section section1"></div>
<div class="tree-section section2"></div>
<div class="tree-section section3"></div>
<div class="tree-section section4"></div>

<div class="ornament ornament1"></div>
<div class="ornament ornament2"></div>
<div class="ornament ornament3"></div>
<div class="ornament ornament4"></div>
<div class="ornament ornament5"></div>
<div class="ornament ornament6"></div>

<div class="star"></div>
</div>

<div class="snow" id="snow"></div>

<div class="link-container">

</div>
</div>