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

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

news 来源：原创 2025/5/15 14:49:23

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

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

完整代码

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

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

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

编程日记 2025/5/15 14:49:23

Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明）

教程概述本教程先是幽络源初步教学分析掌阅书籍的网络结构，最后提供完整的爬取源码与使用说明，并展示结果，切记勿将本教程内容肆意非法使用。原文链接：Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明…...

编程日记 2025/5/15 14:40:27

Linux网络——UDP的运用

Linux网络——UDP的运用文章目录 Linux网络——UDP的运用一、引入二、服务端实现2.1 创建socket套接字2.2 指定网络接口并bind2.3 接收数据并处理2.4 整体代码2.5 IP的绑定的细节三、用户端实现3.1 创建套接字3.2 指定网络接口3.3 发生数据并接收3.4 绑定问题四、代码五、UD…...

编程日记 2025/5/12 8:04:15

axios

文章目录 [TOC](文章目录) 一、axios的基本使用axios请求1、引用axios,并发送请求axios发送请求的简化写法2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance）1、请求拦截2、响应拦截 axios拦截器、vue中的路由守卫、servlet…...

编程日记 2025/5/15 13:52:58

MacOS下TestHubo安装配置指南

TestHubo是一款开源免费的测试管理工具， 下面介绍MacOS私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业，支持在本地或专属服务器上运行，以实现对数据和系统的完全控制。 1、Mac 服务端安装 Mac安装包下载地址&a…...

编程日记 2025/5/15 7:55:03

vue2/3,Spring Boot以及生产环境跨域解决方案

vue2和vue3跨域解决方案 Vue 2 (基于 Webpack) 的跨域解决方案 1. 创建或编辑 vue.config.js 文件 Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则： // vue.config.js mod…...

编程日记 2025/5/12 14:50:03

TestMAX/DFT Compiler：时序单元的类型、连接顺序和后DFT优化

相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后，Design Compiler内置的HDL Compiler工…...

编程日记 2025/5/6 20:02:12

Elasticsearch：analyzer（分析器）

一、概述可用于将字符串字段转换为单独的术语： 添加到倒排索引中，以便文档可搜索。级查询（如生成搜索词的 match查询）使用。分析器分为内置分析器和自定义的分析器，它们都是由若干个字符过滤器（chara…...

编程日记 2025/5/13 15:04:28

蓝桥杯——异或森林

问题描述在一个神秘的世界中，存在着一个称为"异或森林"的地方。异或森林中的每个树木都拥有独特的力量。肖恩进入了这片森林，他得到了一个任务：找出数组中满足条件的连续子数组，使得连续子数组中所有元素异或运算结果…...

编程日记 2025/5/15 14:23:32

第一个C++程序 - Hello World, 编译与运行

引言编写并运行你的第一个 C 程序是学习这门语言的第一步。通过这个简单的例子，你将了解如何创建、编译和运行一个基本的 C 程序。本文将详细介绍每个步骤，并确保初学者能够顺利上手。一、编写 "Hello World" 程序 1. 创建源代码文件首先…...

编程日记 2025/5/11 8:33:28

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.PerspectiveCamera透…...

编程日记 2025/5/12 15:16:21

测试 - 4 （ 9000 字详解）

一：性能测试 1.1 什么是性能测试性能测试和功能测试虽然都在系统测试阶段进行，但两者有本质区别。功能测试主要关注系统“能否完成特定功能”，例如一辆车是否具备四个轮子、方向盘、挡风玻璃，以及是否能够正常行驶。而性能测试…...

编程日记 2025/5/11 12:23:02

从 Coding (Jenkinsfile) 到 Docker：全流程自动化部署 Spring Boot 实战指南（简化篇）

前言本文记录使用 Coding (以 Jenkinsfile 为核心) 和 Docker 部署 Springboot 项目的过程，分享设置细节和一些注意问题。 1. 配置服务器环境在实施此过程前，确保服务器已配置好 Docker、MySQL 和 Redis，可参考下列链接进行操作&#xff1…...

编程日记 2025/5/15 0:47:26

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点结论及未来工作-Conclusions and future work研究总结未来研究方…...

编程日记 2025/5/15 14:27:07

WebGPU入门初识

什么是 WebGPU？ WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。与 WebGL 不同，Web…...

编程日记 2025/5/14 17:13:06

Go语言基础语法

文章目录 Go语言基础语法一、引言二、基础语法1、变量声明与作用域1.1、全局变量1.2、局部变量1.3、块作用域 2、基本数据类型3、控制流程3.1、条件语句3.2、循环语句 4、函数5、并发编程三、使用示例四、并发编程示例五、变量作用域详解六、总结 Go语言基础语法一、引言 G…...

编程日记 2025/5/15 1:05:33

易基因： BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性｜Exp Mol Med

大家好，这里是专注表观组学十余年，领跑多组学科研服务的易基因。肝细胞癌（hepatocellular carcinoma，HCC）早期复发仍然是一个具有挑战性的领域，其中涉及的机制尚未完全被理解。尽管微血管侵犯&#xff08…...

编程日记 2025/5/15 8:03:16

layui动态拼接生成下拉框验证必填项失效问题

利用 jQuery 动态拼接下拉框时，lay-verify"required" 失效了，有以下几种原因。 1. <form></form>标签加入 layui 类，class"layui-form" 。提交按钮上加自动提交，lay-submit ""; 。需…...

编程日记 2025/5/13 21:16:24

Speckly：基于Speckle文档的RAG智能问答机器人

前言 Speckly 是一个基于检索增强生成 (RAG) 技术的智能问答机器人，它能像一位经验丰富的工程师，理解你的问题，并从 Speckle 文档中精准地找到答案。更厉害的是，它甚至可以帮你生成代码片段！🚀 本文将详…...

编程日记 2025/5/15 14:33:45

NodeRed使用心得，实现增删改查等

使用场景介绍在VUE中使用nodeRed实现对节点的增删改查等功能，且储存成功之后下点击时启动对应流程安装与配置 1.安装NodeRed npm install -g --unsafe-perm node-red 安装完成后，你可以通过运行以下命令来启动Node-RED node-red-start2. 配置文件 N…...

编程日记 2025/5/15 14:36:17

万物皆有解法（序）

万物皆有解法（序） 《万物有解》一：解的存在解：可做解释解答，此文引申为原因。可做解除、解围，此文引申为解法、方法。先有事物存于世-what，再有原因为何存-why，再有解法如何除去…...

编程日记 2025/5/4 15:15:02

OpenCV相机标定与3D重建(37)计算两幅图像之间单应性矩阵（Homography Matrix）的函数findHomography()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述找到两个平面之间的透视变换。 cv::findHomography 是 OpenCV 库中用于计算两幅图像之间单应性矩阵（Homography Matrix）的…...

编程日记 2025/5/15 14:40:17

从虚拟到现实：AI与AR/VR技术如何改变体验经济？

引言：体验经济的崛起在当今消费环境中，产品与服务早已不再是市场竞争的唯一焦点，能够提供深刻感知和独特体验的品牌，往往更能赢得消费者的青睐。这种转变标志着体验经济的崛起。体验经济不仅仅是简单的买卖行为，而是通…...

编程日记 2025/5/15 0:12:35

Linux系统之stat命令的基本使用

Linux系统之stat命令的基本使用一、stat命令介绍二、stat命令帮助2.1 查询帮助信息2.2 stat命令的帮助解释三、stat命令的基本使用3.1 查询文件信息3.2 查看文件系统状态3.3 使用格式化输出3.4 以简洁形式打印信息四、注意事项一、stat命令介绍 stat 命令用于显示文件或文…...

编程日记 2025/5/10 2:03:50

c++ 命名空间

目录目录目录 namespace的定义代码演示先使用全局域，再使用namespace定义出的域命名空间中可以定义变量/函数/类型等命名空间可以嵌套 namespace的使用指定命名空间访问 using将命名空间中某个成员展开展开命名空间中全部成员在c中，由…...

编程日记 2025/5/15 14:39:41

【实验记录】动手实现一个简单的神经网络实验（一）

最近上了“神经网络与深度学习”这门课，有一个自己动手实现调整神经网络模型的实验感觉还挺有记录意义，可以帮我巩固之前学习到的理论知识，所以就打算记录一下。实验大概是使用LeNet（卷积神经网络）对MINIST数据集做图…...

编程日记 2025/5/14 20:38:56

【2024年最新】BilibiliB站视频动态评论爬虫

废话不多说，直接先放git仓库：GitHub - linyuye/Bilibili_crawler: bilibili爬虫，基于selenium获取oid与cookie，request获取api内容〇：概念简述 oid：视频/动态的uuid，b站对于发布内容的通用唯…...

编程日记 2025/5/15 2:22:29

清空DNS 缓存

如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车然后回车，或者点击确定按钮。出现如下所示标识清空DNS 缓存成功。...

编程日记 2025/5/3 9:04:43

东土智能交通服务器助力北京市车路云一体化建设

背景及意义北京高级别自动驾驶示范区自2020年启动建设，至今已经发展建设到3.0阶段，通州区作为3.0阶段扩建的重点区域之一，扩区建设范围共计约175平方公里，涉及18个属地街镇，涵盖580个路口。作为北京市车路云一体化…...

编程日记 2025/5/15 12:47:44

HarmonyOS NEXT 实战之元服务：静态案例效果---妙语集语

背景： 前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考先上本期效果图 ，里面图片自行替换效果图1完整代码案例如下： import { authentication } …...

编程日记 2025/5/10 15:44:15

python基础项目

1.联系人案例 # 导入的模块 from input_util import * import re import csv# 定义一个变量保存文件读取的信息 users {}# 封装读取文件的函数 def reader_file(path_name: str ./python基础/2024-11-15python基础项目/data/a.csv) -> None:try:with open(path_name, enco…...

编程日记 2025/5/14 13:50:47

mysql返回N/A

在写统计图的接口，sql查询一直无数据，给的默认值也没有实现： SELECTifnull( unit.num, 0 ) riskUnitCount,ifnull( EVENT.num, 0 ) riskEventCount,ifnull( measure.num, 0 ) riskMeasureCount FROMtb_companyLEFT JOIN (SELECTrisk.qyid,co…...

编程日记 2025/5/14 11:36:10

C++---------迭代策略与迭代器

一、迭代策略与迭代器迭代器的概念迭代器是一种对象，它提供了一种统一的方式来访问容器（如数组、向量、列表等）中的元素，而不暴露容器的内部结构。迭代器的行为类似于指针，可以用于遍历容器中的元素、修改元素以及…...

编程日记 2025/5/14 1:56:31

深入解析 Oracle 的聚合函数 ROLLUP

目录深入解析 Oracle 的聚合函数 ROLLUP一、ROLLUP 函数概述二、ROLLUP 函数语法三、ROLLUP 实例详解（一）基础分组聚合（二）引入 ROLLUP 函数（三）ROLLUP 与 NULL 值（四）多列复杂分组…...

编程日记 2025/5/14 21:15:35

kipotix4靶机实战

信息收集 1.判断靶机ip 原理：开靶机之前nmap扫一次网段，再开靶机之后扫一次，查看多出来的ip就是靶机ip ip192.168.98.1742.判断端口服务，系统版本 a.确定端口 b.-p指定端口进一步收集 c.信息筛选 1.端口：22,80,139,…...

编程日记 2025/5/12 18:00:18

Java中处理if-else的几种高级方法

前言在我看来多写几个if-else没啥大不了的，但是就是看起来没啥逼格，领导嫌弃。我根据开发的经历写几个不同的替代方法一、枚举法替代我先前写了一篇文章，可以去看看。通过枚举替换if-else语句的解决方案_枚举代替if else c语言-CSDN博…...

编程日记 2025/5/14 23:25:41

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中。以下是关于 LaTeX 的详细解释： 1. LaTeX 的基本概念本质：LaTeX 是基于 TeX 的排版系统，提供了更高…...

编程日记 2025/5/14 17:27:17

Go入门篇：（一）golang的安装和编辑工具安装

一、前言最近我有幸接触到Go语言，深入了解后，发现go语言确实有很多让人惊叹的地方。作为一个有着多年Java编程经验的程序员，我深深地被它所吸引，并且决定记录下我的学习之路，以便与大家分享我的经验和感悟。与Java不同，Go语言的语法和运行效率都非常高，特别是对于并…...

编程日记 2025/5/14 10:57:25

【10】Selenium+Python UI自动化测试邮件发送测试报告（某积载系统实例-04）

测试报告需要发送给相关人员，但每次都要在report目录下去复制太麻烦，可以使用邮件模块自动将生成的报告发送给相关人员 1、新增utils文件夹，用于存放工具文件在utils下新增sendmail.py文件代码 sendmail.py import smtplib from email.…...

编程日记 2025/5/12 0:10:18

Playwright爬虫xpath获取技巧

示例一 <button class"MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton…...

编程日记 2025/5/12 21:21:44

运算符 - 算术、关系、逻辑运算符

引言在编程中，运算符是用于执行特定操作的符号。C 提供了多种类型的运算符，包括算术运算符、关系运算符和逻辑运算符等。理解这些运算符及其用法对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的这三种基本运算符，并通过实例帮助读…...

编程日记 2025/5/13 23:48:04

中关村科金外呼机器人智能沟通破解营销难题

当今，传统的营销方式在效率、成本控制、客户管理等方面逐渐显现出局限性，难以满足现代企业的需求。如何提升营销效率、降低运营成本、有效管理客户会员，成为企业的难题。中关村科金外呼机器人通过智能化沟通技术，为企业提供了一站…...

编程日记 2025/5/13 17:47:22

css绘制圆并绘制圆的半径

<div class"item1"></div>.item1 {position: relative;width: 420px;height: 420px;border-radius: 50%; /* 圆形 */color: white; /* 文本颜色 */background-color: rgba(154, 227, 36, 0.4); } .item1::before {content: "";position: absol…...

编程日记 2025/5/12 4:36:28

实现类似gpt 打字效果

1. css的动画（animation) css中实现动画有两种方式：transition过渡动画、 animation自定义动画。具体的可以看MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…...

编程日记 2025/5/14 13:49:38

【乐企文件生成工程】根据特定要素动态选择需要生成的发票板式文件实现

乐企版式文件生成工程，涉及到多个票种，不乏特殊票种的生成，如果每个特殊票种都单独写逻辑，那整个代码写起来体量就不得了，如何实现代码逻辑的同时也更优雅的实现代码扩展性呢，您接着往下看。使用设计模式工厂模式 1、定义接口InvoiceFileService public interface Inv…...

编程日记 2025/5/11 21:10:02

near-synonym反义词生成(2)：Prompt +Bert-MLM(FT)

near-synonym之反义词生成方法二 near-synonym, 中文反义词/近义词/同义词(antonym/synonym)工具包. 方法一为(neg_antonym): Word2vec -> ANN -> NLI -> Length 方法二为(mlm_antonym): Prompt Bert-MLM(FT) Beam-Search 项目地址 github: https://github.com/yon…...

编程日记 2025/5/14 5:53:38

dockfile 配置 /etc/apt/source.list.d/debian.list 清华镜像

docker:3.12.7 镜像使用的是 debian 系统，比 ubuntu 更轻量。debian 系统内，apt 镜像源列表位于 /etc/apt/source.list.d/debian.list（作为对比，ubuntu 的镜像列表位于 /etc/apt/source.list，二者语法相同）…...

编程日记 2025/5/13 23:10:26

DAY38|动态规划Part06|LeetCode:322. 零钱兑换、279.完全平方数、139.单词拆分

目录 LeetCode:322. 零钱兑换基本思路 C代码 LeetCode:279.完全平方数 C代码 LeetCode:139.单词拆分基本思路 C代码 LeetCode:322. 零钱兑换力扣题目链接文字讲解：LeetCode:322. 零钱兑换视频讲解：动态规划之完全背包，装满背包最…...

编程日记 2025/5/10 1:37:55

Spring事务回滚

Transactional注解 Transactional作用：就是在当前这个方法执行开始之前来开启事务，方法执行完毕之后提交事务。如果在这个方法执行的过程当中出现了异常，就会进行事务的回滚操作。 Transactional注解：我们一般会在业务层当中来控制…...

编程日记 2025/5/7 15:08:36

【目标跟踪】checkpoint文件到底是什么?

说实话，我一直决定计算机视觉是个很玄的东西，里面的很多东西都是看了概念之后云里雾里，今天就把我复现代码时遇到的不懂得讲一讲——checkpoint文件是个啥？ checkpoint文件顾名思义就是一个模型检查点文件，用于保存训练…...

编程日记 2025/5/10 8:03:54

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

前言

效果展示

实现步骤

1. HTML 结构

2. CSS 样式

3. JavaScript 动态效果

代码解析

HTML 部分

CSS 部分

JavaScript 部分

自定义修改

注意事项

总结

完整代码

相关文章：