純 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 交互，我們創建了一個既簡單又好看的節日裝飾效果。
希望這個教程對你有幫助！如果你有任何問題或建議，歡迎在評論區留言。
完整代碼
完整代碼已在上文提供，你可以直接復制使用。記得給個贊和收藏哦！
