当前位置：首页 > news >正文

使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景

news 2025/7/17 22:37:02

### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页

在这篇文章中，我们将使用纯HTML和CSS创建一棵节日圣诞树。通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。

### 实现思路

1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。
2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。
3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。

### 代码实现

以下是完整的HTML和CSS代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Festive Christmas Tree</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(to bottom, #001f3f, #1d1d1d);
color: white;
font-family: 'Arial', sans-serif;
}
.tree {
position: relative;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid #0a6b08;
margin-top: 20px;
}
.tree:before,
.tree:after {
content: '';
position: absolute;
left: -40px;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
}
.tree:before {
top: -70px;
border-bottom: 120px solid #096508;
}
.tree:after {
top: -140px;
border-bottom: 140px solid #085507;
}
.trunk {
width: 30px;
height: 50px;
background-color: #4a2a0a;
margin: -15px auto 0;
}
.star {
position: absolute;
top: -170px;
left: -10px;
font-size: 35px;
color: gold;
}
.ornament {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
}
.ornament:nth-child(2) { top: -130px; left: -20px; background-color: red; }
.ornament:nth-child(3) { top: -110px; left: 40px; background-color: yellow; }
.ornament:nth-child(4) { top: -90px; left: -30px; background-color: blue; }
.ornament:nth-child(5) { top: -60px; left: 20px; background-color: purple; }
.ornament:nth-child(6) { top: -40px; left: 50px; background-color: pink; }
.ornament:nth-child(7) { top: -120px; left: -50px; background-color: cyan; }
</style>
</head>
<body>