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

用HTML5实现灯笼效果

news 2026/3/27 3:15:09

本文介绍了两种实现效果：一种使用画布（canvas）标签/元素，另一种不用画布（canvas）标签/元素主要使用CSS实现。

使用画布（canvas）标签/元素实现，下面，在画布上，用JavaScript画两个红灯笼，并且红灯笼左右来回移动的源码：

<!DOCTYPE html>
<html>
<head><title>红灯笼</title><style>canvas {border: 1px solid black;background-color: blue; /*设置画布的背景色为蓝色*/}</style>
</head>
<body>
<!-- 设置画布宽高是500*300，单位是 px。 --><canvas id="canvas" width="500" height="300"></canvas><script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var angle1 = 0;var angle2 = 0;  // 使第二个灯笼的初始角度与第一个灯笼不同function drawLantern(x, y, radius, angle) {x += Math.sin(angle) * 20;// Draw the suspension linecontext.beginPath();context.moveTo(x, y - radius / 4);context.lineTo(x, 0);context.stroke();// Draw the top context.beginPath();context.arc(x, y, radius / 4, 0, Math.PI * 2);context.fillStyle = 'gold';context.fill();context.stroke();// Draw the main bodycontext.beginPath();context.arc(x, y, radius, 0, Math.PI * 2);context.fillStyle = 'red';context.fill();context.stroke();// Draw the bottomcontext.beginPath();context.arc(x, y + radius / 2, radius / 4, 0, Math.PI * 2);context.fillStyle = 'gold';context.fill();context.stroke();// Draw the tasselcontext.beginPath();context.moveTo(x, y + radius / 2);context.lineTo(x, y + radius * 1.2);context.moveTo(x - radius / 6, y + radius / 2);context.lineTo(x - radius / 6, y + radius * 1.2);context.moveTo(x + radius / 6, y + radius / 2);context.lineTo(x + radius / 6, y + radius * 1.2);context.stroke();}function animate() {context.clearRect(0, 0, canvas.width, canvas.height);context.fillStyle = 'blue';context.fillRect(0, 0, canvas.width, canvas.height);drawLantern(200, 200, 50, angle1);drawLantern(300, 200, 50, angle2);angle1 += 0.05;angle2 += 0.05;requestAnimationFrame(animate);}animate();</script>
</body>
</html>

运行效果如下：

下面是另一种实现主要使用CSS实现，源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>红灯笼效果</title><!-- 灯笼代码↓，放在 head标签内-->
<div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div>
</div>
<div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div>
</div>
<div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div>
</div>
<div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div>
</div>
<style type="text/css">.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none}.deng-box2 {position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none}.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none}.deng-box1 .deng,.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, .8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px #fc903d}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, .8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, .1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, .1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03}.shui-a {position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)}.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center}.night .deng-box,.night .deng-box1,.night .deng-t {background: 0 0 !important}@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg)}50% {-moz-transform: rotate(10deg)}100% {-moz-transform: rotate(-10deg)}}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg)}50% {-webkit-transform: rotate(10deg)}100% {-webkit-transform: rotate(-10deg)}}
</style>
<!-- 灯笼代码↑--></head>
<body></body>
</html>

运行效果如下：

附录

为HTML网页添加喜庆气氛的诸多方法https://blog.csdn.net/cnds123/article/details/128865230

用CSS画了个灯笼https://juejin.cn/post/7051370971932033038

用HTML5实现灯笼效果

本文介绍了两种实现效果：一种使用画布（canvas）标签/元素，另一种不用画布（canvas）标签/元素主要使用CSS实现。使用画布（canvas）标签/元素实现，下面，在画布上…...

编程日记 2024/2/9 17:18:00

Postgresql源码（120）事务XID分配与主备XID同步

参考《Postgresql源码（25）子事务可见性判断和性能问题》 XID获取顶层入口函数：AssignTransactionId static void AssignTransactionId(TransactionState s) {...优先给没有事务ID的父事务分配确保父事务有 XID，以便子事务总是…...

编程日记 2024/2/9 17:16:59

B2077 角谷猜想(洛谷)

题目描述所谓角谷猜想，是指对于任意一个正整数，如果是奇数，则乘 33 加 11，如果是偶数，则除以 22，得到的结果再按照上述规则重复处理，最终总能够得到 11。如，假定初始整数为 55&…...

编程日记 2024/2/9 17:13:56

排序算法---归并排序

原创不易，转载请注明出处。欢迎点赞收藏~ 归并排序是一种常见的排序算法，它采用了分治的思想。它将一个待排序的数组递归地分成两个子数组，分别对两个子数组进行排序，然后将排好序的子数组合并成一个有序数组。具体的归并排序过…...

编程日记 2024/2/9 17:11:53

[WUSTCTF2020]朴实无华（特详解）

一开始说header出问题了就先dirsaerch扫一遍发现robot.txt 访问一下去看看，好好好，肯定不是得他一开始说header有问题，不妨抓包看看，果然有东西访问看看，乱码修复一下，在之前的博客到过 <img src…...

编程日记 2024/2/9 17:08:50

下载已编译的 OpenCV 包在 Visual Studio 下实现快速配置

自己编译 OpenCV 挺麻烦的，配置需要耗费很长时间，编译也需要很长时间，而且无法保证能全部编译通过。利用 OpenCV 官网提供的已编译的 OpenCV 库可以节省很多时间。下面介绍安装配置方法。 1. OpenCV 官网地址是：https://opencv…...

编程日记 2024/2/9 17:07:49

【Linux系统学习】3.Linux用户和权限

Linux用户和权限 1.认知root用户 1.1 root用户（超级管理员） 无论是Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。在Linux系统中，拥有最大权限的账户名为：root（超级管理员） 而在前期&#…...

编程日记 2024/2/9 17:05:47

视频美颜SDK开发指南：从入门到精通的技术实践

美颜SDK是一种强大的工具，它不仅仅可以让用户在实时视频中获得光滑的肌肤和自然的妆容，从简单的滤镜到复杂的人脸识别，美颜SDK涵盖了广泛的技术领域。一、美颜SDK的基本原理美颜SDK包括图像处理、人脸检测和识别、滤镜应用等方面。掌握这些…...

编程日记 2024/2/9 17:02:44

Electron基本介绍

Electron基本介绍 Electron 官方网站：https://www.electronjs.org/zh/ Electron安装方法：npm install electron -g 全局安装 Electron简介：Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScr…...

编程日记 2024/2/9 16:58:40

使用网关过滤器，根据业务规则实现微服务动态路由

文章目录业务场景拦截器实现Spring Cloud Gateway介绍业务场景我们服务使用Spring Cloud微服务架构，使用Spring Cloud Gateway 作为网关，使用 Spring Cloud OpenFeign 作为服务间通信方式作为网关，主要作用是鉴权与路由转发。大多数应用场…...

编程日记 2024/2/9 16:55:37

PKI - 03 密钥管理（如何进行安全的公钥交换）

文章目录 Pre密钥管理面临的挑战安全密钥管理的几种方式手动密钥交换与确认受信任的介绍 Pre PKI - 02 对称与非对称密钥算法密钥管理面临的挑战密钥管理面临的挑战主要包括以下几点： 安全的公钥交换：在使用基于非对称密钥算法的服务之前&#xff0c…...

编程日记 2024/2/9 16:53:36

Bee+SpringBoot稳定的Sharding、Mongodb ORM功能(同步 Maven)

Hibernate/MyBatis plus Sharding JDBC Jpa Spring data GraphQL App ORM (Android, 鸿蒙) Bee 小巧玲珑！仅 860K, 还不到 1M, 但却是功能强大！ V2.2 (2024春节・LTS 版) 1.Javabean 实体支持继承 (配置 bee.osql.openEntityCanExtendtrue) 2. 增强批…...

编程日记 2024/2/9 16:51:34

HarmonyOS SDK 助力新浪新闻打造精致易用的新闻应用

原生智能是HarmonyOS NEXT的核心亮点之一，依托HarmonyOS SDK丰富全面的开放能力，开发者只需通过几行代码，即可快速实现AI功能。新浪新闻作为鸿蒙原生应用开发的先行者之一，从有声资讯入手，基于Speech Kit朗读控件上线听…...

编程日记 2024/2/9 16:50:33

IT行业有哪些证书含金量高呢？

目录引言： 一、计算机网络类证书二、数据库管理类证书三、安全与信息技术管理类证书四、编程与开发类证书五、数据科学与人工智能类证书六、结论： 悟已往之不谏，知来者犹可追 …...

编程日记 2024/2/9 16:47:30

zlib交叉编译（rv1126）

目录 1.下载 2.解压 3.配置 4.编译 1.下载 1）下载地址 zlib Home Site 2）下载tar.gz版本下载该版本。 2.解压 1）解压到某个文件夹，新建 install-rv1126文件夹 2）进入源码目录 3.配置 1）导出交叉编…...

编程日记 2024/2/9 16:42:26

数字孪生与智慧园区的融合：打造未来产业生态的新篇章

随着科技的飞速发展，数字孪生和智慧园区已经成为当今社会发展的重要趋势。数字孪生技术为物理世界的对象提供了数字化的复制体，而智慧园区则通过各种信息技术手段实现园区的智能化管理。二者的融合，将为未来产业生态的发展开辟新的篇章。一…...

编程日记 2024/2/9 16:41:24

nodejs将console.log保存到log.txt文档中（electron工具）

txtConsole.js const { app } require(electron); const fs require(fs); const moment require(moment); const mainData require(./mainData);//electron 软件根目录 const rootPath path.dirname(app.getPath(exe));const txtConsole {log(p1 , p2 , p3 , p4 , p…...

编程日记 2024/2/9 16:40:23

微服务的幂等性

微服务架构设计的中心思想是将服务进行拆分，但是在这个过程中，如果被依赖的服务发生奔溃，就会引起一系列问题。为了解决这个问题，就会引入重试的机制，重试又会引入幂等性的问题，下面我们就分析这个过程&…...

编程日记 2024/2/9 16:37:19

Redis之基础篇

Redis简介 Redis是一种基于键值对（Key-Value）的NoSQL数据库，它支持string（字符串）、hash（哈希）、list（列表）、set（集合）、zset（有序集…...

编程日记 2024/2/9 16:36:17

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用

靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤，从而可以造成命令执行，目录遍历等．首先存在漏洞的web服务一定是存在xml传输数据的，可以在http头的content-type中查…...

编程日记 2024/2/9 16:35:15

51单片机项目避坑：用ADC0804读PT100信号，你的滤波和标度变换做对了吗？（附源码分析）

51单片机PT100温度检测实战：从ADC采样到标度变换的完整设计解析在工业温度测量领域，PT100凭借其优异的线性度和稳定性成为首选传感器之一。不同于常见的DS18B20数字温度传感器，PT100需要配合精密信号调理电路和AD转换器才能实现准确测量。本…...

编程新知 2026/3/27 2:12:41

紧固件包装机有哪些类型？自动化包装设备全解析_FES 2026上海紧固件展

2026第十六届上海紧固件专业展（Fastener Expo Shanghai 2026）将于6月24日至26日在国家会展中心（上海）举行。作为紧固件行业的重要展示窗口，本届展会将重点呈现制造端与后道环节的智能化升级，其中&#xff0…...

编程新知 2026/3/27 1:46:29

【专栏二：深度学习】-【一张图讲清楚：什么是向前传输和向后传输】

文章目录前言一、输入数据：训练从样本开始二、向前传播：模型先算出一个预测结果三、先把第一个公式讲明白：为什么会有 z Wx b？四、只有线性计算还不够，所以还需要激活函数1. ReLU2. Sigmoid五、预测结果：…...

编程新知 2026/3/27 1:34:21

为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍）

第一章：为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍） 当全省智能灌溉系统在每日清晨5:00–7:00集中调度水阀、上传土壤墒情数据时，基于默认配置的Flask API常出现进程…...

编程新知 2026/3/27 1:30:20

C语言回调函数在TCP客户端中的实现与应用

C语言回调函数在TCP客户端中的实现与应用1. 回调函数基础概念回调函数是一种通过函数指针实现的编程机制，允许将一个函数作为参数传递给另一个函数。在C语言中，回调函数的实现完全依赖于函数指针，这与C、Python等现代语言中可能使用仿函数或匿…...

编程新知 2026/3/27 0:13:23

KKManager全流程管理指南：从安装到效率提升

KKManager全流程管理指南：从安装到效率提升【免费下载链接】KKManager Mod, plugin and card manager for games by Illusion that use BepInEx 项目地址: https://gitcode.com/gh_mirrors/kk/KKManager 学习目标理解KKManager的核心价值与应用场景掌握从…...

编程新知 2026/3/26 22:12:06

美团、腾讯、字节怎么选？3个真实案例告诉你答案

美团、腾讯、字节怎么选？3个真实案例告诉你答案 2026校招季，三个朋友的不同选择大厂直通车-校招大礼包：入口入口写在前面 2026届秋招结束了。我的三个朋友小A、小B、小C都拿到了心仪的offer。有意思的是，他们分别选了字节、腾…...

编程新知 2026/3/26 22:06:05

强强联合！望石智慧携手华为、华鲲振宇发布AI药物研发联合解决方案，共筑中国智慧医药创新生态

近日，以“因聚而升融智有为”为主题的华为中国合作伙伴大会2026在深圳圆满落幕。望石智慧作为其国内AI驱动医药创新领域的核心技术伙伴受邀参会，并在智能制造医药行业论坛发表演讲。会议期间，望石智慧、华为、华鲲振宇三方达成战略级生态合作…...

编程新知 2026/3/26 21:52:03

避坑指南：华为Atlas200DK开发板联网常见错误及解决方法

华为Atlas200DK开发板联网避坑实战手册当开发者第一次拿到华为Atlas200DK开发板时，联网往往是遇到的第一个技术门槛。这个看似简单的操作，在实际操作中却可能因为各种配置细节问题而耗费数小时。本文将深入剖析开发板联网过程中的典型故障场景&#xff…...

编程新知 2026/3/26 21:30:00

美军“转正”美科技公司AI系统，专家解读

来源：环球时报【环球时报报道记者刘扬】据路透社等外媒近日报道，五角大楼将把美国科技公司Palantir的人工智能（AI）系统Maven列为“正式在编项目”，使美军多军种将该公司的相关技术用于军事领域。五角大楼强调&#x…...

编程新知 2026/3/26 21:21:57

相关文章：