纯 HTML+CSS+JS 实现一个炫酷的圣诞树动画特效

前言

圣诞节快到了，今天给大家带来一个简单但是效果不错的圣诞树动画特效。这个特效完全使用原生 HTML、CSS 和 JavaScript 实现，包含闪烁的星星、随机彩灯等元素，非常适合节日气氛！

效果展示

实现步骤

1. HTML 结构

首先创建基本的 HTML 结构，包括星星、树身和树干：

html:index.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 来创建圣诞树的外观和动画效果：

css:style.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 添加随机彩灯效果：

javascript:script.js 复制代码

// 添加随机彩灯
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 交互，我们创建了一个既简单又好看的节日装饰效果。

希望这个教程对你有帮助！如果你有任何问题或建议，欢迎在评论区留言。

完整代码

完整代码已在上文提供，你可以直接复制使用。记得给个赞和收藏哦！