纯 HTML+CSS+JS 实现一个炫酷的圣诞树动画特效
前言
圣诞节快到了，今天给大家带来一个简单但是效果不错的圣诞树动画特效。这个特效完全使用原生 HTML、CSS 和 JavaScript 实现，包含闪烁的星星、随机彩灯等元素，非常适合节日气氛！
效果展示
实现步骤
1. HTML 结构
首先创建基本的 HTML 结构，包括星星、树身和树干：
<!DOCTYPE html>
<html>
<head><title>圣诞树</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="tree"><div class="star"></div><div class="tree-body"><span></span><span></span><span></span><span></span><span></span></div><div class="trunk"></div></div><script src="script.js"></script>
</body>
</html>
2. CSS 样式
使用 CSS 来创建圣诞树的外观和动画效果：
body {background: #0e3742;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;
}.tree {position: relative;
}.star {width: 20px;height: 20px;background: yellow;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);position: absolute;top: -10px;left: 50%;transform: translateX(-50%);animation: starTwinkle 1s infinite;
}.tree-body {display: flex;flex-direction: column;align-items: center;
}.tree-body span {display: block;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 60px solid #0f9b0f;margin-top: -30px;
}.tree-body span:nth-child(1) { width: 20px; }
.tree-body span:nth-child(2) { width: 40px; }
.tree-body span:nth-child(3) { width: 60px; }
.tree-body span:nth-child(4) { width: 80px; }
.tree-body span:nth-child(5) { width: 100px; }.trunk {width: 20px;height: 40px;background: #573b1c;margin: 0 auto;
}@keyframes starTwinkle {0%, 100% { opacity: 1; }50% { opacity: 0.3; }
}.tree-body span::after {content: '';position: absolute;width: 6px;height: 6px;background: red;border-radius: 50%;animation: lightTwinkle 0.8s infinite;
}@keyframes lightTwinkle {0%, 100% { opacity: 1; }50% { opacity: 0.4; }
}
3. JavaScript 动态效果
使用 JavaScript 添加随机彩灯效果：
// 添加随机彩灯
function addLights() {const treeSpans = document.querySelectorAll('.tree-body span');treeSpans.forEach(span => {const width = span.offsetWidth;const lights = Math.floor(width / 20);for(let i = 0; i < lights; i++) {const light = document.createElement('div');light.className = 'light';light.style.left = `${Math.random() * width}px`;light.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;light.style.animationDelay = `${Math.random() * 2}s`;span.appendChild(light);}});
}// 页面加载完成后添加彩灯
window.addEventListener('load', addLights);
代码解析
HTML 部分
tree类用于包含整个圣诞树star类创建树顶的星星tree-body包含多个span元素，形成树的主体trunk类创建树干
CSS 部分
-
基础样式
- 使用
flex布局使树居中显示 - 设置深色背景突出树的效果
- 使用
-
星星效果
- 使用
clip-path创建星形 - 添加
starTwinkle动画使星星闪烁
- 使用
-
树身效果
- 使用 CSS 边框技巧创建三角形
- 通过不同的宽度创建层次感
-
动画效果
- 使用
@keyframes创建闪烁动画 - 为彩灯添加随机延迟效果
- 使用
JavaScript 部分
- 动态计算并添加彩灯
- 使用随机数生成彩灯位置和颜色
- 添加随机动画延迟创造自然效果
自定义修改
你可以通过修改以下参数来自定义圣诞树：
- 树的颜色：修改
.tree-body span中的border-bottom颜色 - 树的大小：调整
border-left和border-right的值 - 树干大小：修改
.trunk的尺寸 - 彩灯数量：在
script.js中调整计算逻辑 - 动画速度：修改
animation的时间参数
注意事项
- 确保三个文件在同一目录下
- 正确引用 CSS 和 JavaScript 文件
- 使用现代浏览器以支持所有 CSS 特性
总结
这个圣诞树特效完全使用原生前端技术实现，不需要任何外部库。通过组合使用 HTML 结构、CSS 动画和 JavaScript 交互，我们创建了一个既简单又好看的节日装饰效果。
希望这个教程对你有帮助！如果你有任何问题或建议，欢迎在评论区留言。
完整代码
完整代码已在上文提供，你可以直接复制使用。记得给个赞和收藏哦！
