<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣诞树</title>
<style>
/* 页面整体样式，居中显示 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
margin: 0;
}
/* 圣诞树容器，定位基准 */
.christmas-tree {
position: relative;
}
/* 星星样式（树顶） */
.star {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background-color: #ffeb3b;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
/* 星星旋转动画 */
animation: spin 8s linear infinite;
}
/* 树冠通用样式 */
.tree-part {
position: relative;
margin: 0 auto;
background: linear-gradient(to bottom, #2e7d32, #1b5e20);
}
/* 第一层树冠（最大） */
.tree-top {
width: 200px;
height: 120px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* 第二层树冠 */
.tree-middle {
width: 160px;
height: 100px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
margin-top: -20px;
}
/* 第三层树冠 */
.tree-bottom {
width: 120px;
height: 80px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
margin-top: -20px;
}
/* 树干样式 */
.tree-trunk {
width: 40px;
height: 80px;
background: linear-gradient(to right, #8d6e63, #5d4037);
margin: 0 auto;
border-radius: 5px;
}
/* 装饰小球通用样式 */
.ornament {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
animation: blink 2s ease-in-out infinite alternate;
}
/* 不同颜色的装饰球 */
.ornament-red {
background-color: #f44336;
top: 40px;
left: 40px;
}
.ornament-blue {
background-color: #2196f3;
top: 80px;
right: 40px;
}
.ornament-pink {
background-color: #e91e63;
top: 120px;
left: 60px;
}
.ornament-yellow {
background-color: #ffeb3b;
top: 100px;
right: 60px;
}
/* 星星旋转动画 */
@keyframes spin {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
/* 装饰球闪烁动画 */
@keyframes blink {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0.7;
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div class="christmas-tree">
<!-- 树顶星星 -->
<div class="star"></div>
<!-- 装饰小球 -->
<div class="ornament ornament-red"></div>
<div class="ornament ornament-blue"></div>
<div class="ornament ornament-pink"></div>
<div class="ornament ornament-yellow"></div>
<!-- 树冠部分 -->
<div class="tree-part tree-top"></div>
<div class="tree-part tree-middle"></div>
<div class="tree-part tree-bottom"></div>
<!-- 树干 -->
<div class="tree-trunk"></div>
</div>
</body>
</html>
这家伙太懒了，什么也没留下。
