用HTML5实现灯笼效果
本文介绍了两种实现效果：一种使用画布（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）标签/元素实现，下面，在画布上…...
Postgresql源码（120）事务XID分配与主备XID同步
参考 《Postgresql源码（25）子事务可见性判断和性能问题》 XID获取顶层入口 函数：AssignTransactionId static void AssignTransactionId(TransactionState s) {...优先给没有事务ID的父事务分配 确保父事务有 XID，以便子事务总是…...
B2077 角谷猜想(洛谷)
题目描述 所谓角谷猜想，是指对于任意一个正整数，如果是奇数，则乘 33 加 11，如果是偶数，则除以 22，得到的结果再按照上述规则重复处理，最终总能够得到 11。如，假定初始整数为 55&…...
排序算法---归并排序
原创不易，转载请注明出处。欢迎点赞收藏~ 归并排序是一种常见的排序算法，它采用了分治的思想。它将一个待排序的数组递归地分成两个子数组，分别对两个子数组进行排序，然后将排好序的子数组合并成一个有序数组。 具体的归并排序过…...
[WUSTCTF2020]朴实无华（特详解）
一开始说header出问题了 就先dirsaerch扫一遍 发现robot.txt 访问一下 去看看，好好好，肯定不是得 他一开始说header有问题，不妨抓包看看，果然有东西 访问看看，乱码修复一下，在之前的博客到过 <img src…...
下载已编译的 OpenCV 包在 Visual Studio 下实现快速配置
自己编译 OpenCV 挺麻烦的，配置需要耗费很长时间，编译也需要很长时间，而且无法保证能全部编译通过。利用 OpenCV 官网提供的已编译的 OpenCV 库可以节省很多时间。下面介绍安装配置方法。 1. OpenCV 官网 地址是：https://opencv…...
【Linux系统学习】3.Linux用户和权限
Linux用户和权限 1.认知root用户 1.1 root用户（超级管理员） 无论是Windows、MacOS、Linux均采用多用户的管理模式进行权限管理。 在Linux系统中，拥有最大权限的账户名为：root（超级管理员） 而在前期&#…...
视频美颜SDK开发指南：从入门到精通的技术实践
美颜SDK是一种强大的工具，它不仅仅可以让用户在实时视频中获得光滑的肌肤和自然的妆容，从简单的滤镜到复杂的人脸识别，美颜SDK涵盖了广泛的技术领域。 一、美颜SDK的基本原理 美颜SDK包括图像处理、人脸检测和识别、滤镜应用等方面。掌握这些…...
Electron基本介绍
Electron基本介绍 Electron 官方网站：https://www.electronjs.org/zh/ Electron安装方法：npm install electron -g 全局安装 Electron简介：Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScr…...
使用网关过滤器，根据业务规则实现微服务动态路由
文章目录 业务场景拦截器实现Spring Cloud Gateway介绍 业务场景 我们服务使用Spring Cloud微服务架构，使用Spring Cloud Gateway 作为网关，使用 Spring Cloud OpenFeign 作为服务间通信方式作为网关，主要作用是鉴权与路由转发。大多数应用场…...
PKI - 03 密钥管理（如何进行安全的公钥交换）
文章目录 Pre密钥管理面临的挑战安全密钥管理的几种方式手动密钥交换与确认受信任的介绍 Pre PKI - 02 对称与非对称密钥算法 密钥管理面临的挑战 密钥管理面临的挑战主要包括以下几点： 安全的公钥交换：在使用基于非对称密钥算法的服务之前，…...
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. 增强批…...
HarmonyOS SDK 助力新浪新闻打造精致易用的新闻应用
原生智能是HarmonyOS NEXT的核心亮点之一，依托HarmonyOS SDK丰富全面的开放能力，开发者只需通过几行代码，即可快速实现AI功能。新浪新闻作为鸿蒙原生应用开发的先行者之一，从有声资讯入手，基于Speech Kit朗读控件上线听…...
IT行业有哪些证书含金量高呢？
目录 引言： 一、 计算机网络类证书 二、 数据库管理类证书 三、 安全与信息技术管理类证书 四、 编程与开发类证书 五、 数据科学与人工智能类证书 六、结论： 悟已往之不谏，知来者犹可追 …...
zlib交叉编译（rv1126）
目录 1.下载 2.解压 3.配置 4.编译 1.下载 1）下载地址 zlib Home Site 2）下载tar.gz版本 下载该版本。 2.解压 1）解压到某个文件夹，新建 install-rv1126文件夹 2）进入源码目录 3.配置 1）导出交叉编…...
数字孪生与智慧园区的融合：打造未来产业生态的新篇章
随着科技的飞速发展，数字孪生和智慧园区已经成为当今社会发展的重要趋势。数字孪生技术为物理世界的对象提供了数字化的复制体，而智慧园区则通过各种信息技术手段实现园区的智能化管理。二者的融合，将为未来产业生态的发展开辟新的篇章。 一…...
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…...
微服务的幂等性
微服务架构设计的中心思想是将服务进行拆分，但是在这个过程中，如果被依赖的服务发生奔溃，就会引起一系列问题。为了解决这个问题，就会引入重试的机制，重试又会引入幂等性的问题，下面我们就分析这个过程&…...
Redis之基础篇
Redis简介 Redis是一种基于键值对（Key-Value）的NoSQL数据库，它支持string（字符串）、hash（哈希）、list（列表）、set（集合）、zset（有序集…...
靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用
靶机实战bwapp亲测xxe漏洞攻击及自动化XXE注射工具分析利用。 1|0介绍 xxe漏洞主要针对webservice危险的引用的外部实体并且未对外部实体进行敏感字符的过滤，从而可以造成命令执行，目录遍历等．首先存在漏洞的web服务一定是存在xml传输数据的，可以在http头的content-type中查…...
openGauss学习笔记-216 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-CPU
文章目录 openGauss学习笔记-216 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-CPU216.1 CPU216.2 查看CPU状况216.3 性能参数分析 openGauss学习笔记-216 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-CPU 获取openGauss节点的CPU、内存、I/O和网络资源使用情况…...
【教程】Linux使用git自动备份和使用支持文件恢复的rm命令
转载请注明出处：小锋学长生活大爆炸[xfxuezhang.cn] 背景介绍 首先非常不幸地告诉你：Linux 系统的标准 rm 命令不支持文件恢复功能。一旦使用 rm 删除了文件或目录，它们就会从文件系统中永久删除，除非你使用专门的文件恢复工具尝试…...
记录使用M1 Mac开发LVGL嵌入式项目
技术流 使用Gui Guider进行UI设计，生成lvgl code将lvgl code移植到esp32s3开发板 Gui Guider的安装 安装下面流程一步一步进行 LVGL的移植 硬件：esp32-8048s043开发板 开发环境：PlatformIO M1芯片安装ESP32驱动 从https://www.wch.cn…...
【SpringBoot】JWT令牌
📝个人主页：五敷有你 🔥系列专栏：SpringBoot ⛺️稳重求进，晒太阳 什么是JWT JWT简称JSON Web Token，也就是通过JSON形式作为Web应用的令牌，用于各方面之间安全的将信息作为JSON对象传输…...
Python爬虫 Beautiful Soup库详解#4
爬虫专栏：http://t.csdnimg.cn/WfCSx 使用 Beautiful Soup 前面介绍了正则表达式的相关用法，但是一旦正则表达式写的有问题，得到的可能就不是我们想要的结果了。而且对于一个网页来说，都有一定的特殊结构和层级关系，…...
Tkinter教程21：Listbox列表框+OptionMenu选项菜单+Combobox下拉列表框控件的使用+绑定事件
------------★Tkinter系列教程★------------ Tkinter教程21：Listbox列表框OptionMenu选项菜单Combobox下拉列表框控件的使用绑定事件 Tkinter教程20：treeview树视图组件，表格数据的插入与表头排序 Python教程57：tkinter中如何…...
Django中的SQL注入攻击防御策略
Django中的SQL注入攻击防御策略 SQL注入是一种常见的网络安全威胁，可以导致数据库被非法访问和数据泄露。本文将介绍在Django框架中防止SQL注入攻击的关键方法，包括使用参数化查询、使用ORM、进行输入验证和使用安全的编码实践。 SQL注入是一种利用应用程…...
ORM模型类
模型 创建两个表 创建模型类 from django.db import models# Create your models here. class BookInfo(models.Model):name models.CharField(max_length10, uniqueTrue) # 书名pub_date models.DateField(nullTrue) # 发布时间read_count models.IntegerField(default…...
Java强训day14（选择题编程题）
选择题 编程题 题目1 import java.util.Scanner;public class Main {public static void main(String[] args) {//读入年月日（字符串形式读入）Scanner sc new Scanner(System.in);String s sc.nextLine();String[] ss s.split(" ");i…...
Redis核心技术与实战【学习笔记】 - 31.番外篇：Redis客户端如何与服务器端交换命令和数据
简述 Redis 使用 RESP 协议（Redis Serialzation Protocol）协议定义了客户端和服务器端交互的命令、数据的编码格式。在 Redis 2.0 版本中，RESP 协议正式称为客户端和服务器端的标准通信协议。从 Redis 2.0 到 Redis 5.0 ，RESP 协…...
电缆线的阻抗50Ω，真正含义是什么？
当我们提到电缆线的阻抗时，它到底是什么意思？RG58电缆通常指的是50Ω的电缆线。它的真正含义是什么？假如取一段3英尺(0.9144米)长的RG58电缆线，并且在前端测量信号路径与返回路径之间的阻抗。那么测得的阻抗是多少？当然…...
校园团餐SAAS系统源码
## 项目介绍 校园团餐SAAS系统，是全新推出的一款轻量级、高性能、前后端分离的团餐系统，支持微信小程序 。 技术特点 > * 前后端完全分离 (互不依赖 开发效率高) > * 采用PHP8 (强类型严格模式) > * ThinkPHP8.0（轻量级PHP开发框…...
图数据库neo4j入门
neo4j 一、安装二、简单操作<一>、创建<二>、查询<三>、关系<四>、修改<五>、删除 三、常见报错<一>、默认的数据库密码是neo4j,打开浏览器http://localhost:7474登录不上,报错: Neo.ClientError.Security.Unauthorized: The client is un…...
Multisim14.0仿真（五十五）汽车转向灯设计
一、功能描述： 左转向：左侧指示灯循环依次闪亮； 右转向：右侧指示灯循环依次闪亮； 刹车： 所有灯常亮； 正常： 所有灯熄灭。 二、主要芯片： 74LS161D 74LS04D 74…...
2402C++,C++的反向代理
原文 cinatra支持反向代理很简单,5行代码就可以了.先看一个简单的示例: #include "cinatra/coro_http_reverse_proxy.hpp" using namespace cinatra; int main() {reverse_proxy proxy_rr(10, 8091);proxy_rr.add_dest_host("127.0.0.1:9001");proxy_rr.a…...
[职场] 服务行业个人简历 #笔记#笔记
服务行业个人简历 服务员个人简历范文1 姓名: XXX国籍:中国 目前所在地:天河区民族:汉族 户口所在地:阳江身材: 160cm43kg 婚姻状况:未婚年龄: 21岁 培训认证:诚信徽章: 求职意向及工作经历 人才类型:普通求职 应聘职位: 工作年限:职称:初级 求职类型:全职可到职日期:随时 月薪…...
代码随想录算法训练营|day30
第七章 回溯算法 332.重新安排行程51.N皇后37.解数独代码随想录文章详解 332.重新安排行程 (1)参考 创建map存储src，[]dest映射关系，并对[]dest排序 每次取map中第一个dest访问，将其作为新的src，每访问一条src->destÿ…...
PHPExcel导出excel
PHPExcel下载地址 https://gitee.com/mirrors/phpexcelhttps://github.com/PHPOffice/PHPExcel 下载后目录结构 需要的文件如下图所示 将上面的PHPExcel文件夹和PHPExcel.php复制到你需要的地方 这是一个简单的示例代码 <?php$dir dirname(__FILE__); //require_once …...
ubuntu系统下c++ cmakelist vscode debug(带传参的debug)的详细示例
c和cmake的debug，网上很多都需要配置launch.json，cpp.json啥的，记不住也太复杂了，我这里使用cmake插件带有的设置，各位可以看一看啊✌(不知不觉，竟然了解了vscode中配置文件的生效逻辑🤣) 克隆…...
聊聊JIT优化技术
🎬作者简介：大家好，我是小徐🥇☁️博客首页：CSDN主页小徐的博客🌄每日一句：好学而不勤非真好学者 📜 欢迎大家关注！ ❤️ 我们知道，想要把高级语言转变成计算…...
LabVIEW动平衡测试与振动分析系统
LabVIEW动平衡测试与振动分析系统 介绍了利用LabVIEW软件和虚拟仪器技术开发一个动平衡测试与振动分析系统。该系统旨在提高旋转机械设备的测试精度和可靠性，通过精确测量和分析设备的振动数据，以识别和校正不平衡问题，从而保证机械设备的高…...
《低功耗方法学》翻译——附录B：UPF命令语法
附录B：UPF命令语法 本章介绍了文本中引用的所选UPF命令的语法。 节选自“统一电源格式（UPF）标准，1.0版”，经该Accellera许可复制。版权所有：(c)2006-2007。Accellera不声明或代表摘录材料的准确性或内容&…...
Leetcode 3027. Find the Number of Ways to Place People II
Leetcode 3027. Find the Number of Ways to Place People II 1. 解题思路2. 代码实现 题目链接：3027. Find the Number of Ways to Place People II 1. 解题思路 这一题的话我也没想到啥特别好的思路，采用的纯粹是遍历剪枝的思路。 遍历的话好理解&…...
android inset 管理
目录 简介 Insets管理架构 Insets相关类图 app侧的类 WMS侧的类 inset show的流程 接口 流程 WMS侧确定InsetsSourceControl的流程 两个问题 窗口显示时不改变现有的inset状态 全屏窗口上的dialog 不显示statusbar问题 View 和 DecorView 设置insets信息 输入法显…...
Python中使用opencv-python库进行颜色检测
Python中使用opencv-python库进行颜色检测 之前写过一篇VC中使用OpenCV进行颜色检测的博文，当然使用opencv-python库也可以实现。 在Python中使用opencv-python库进行颜色检测非常简单，首选读取一张彩色图像，并调用函数imgHSV cv2.cvtColor…...
如何修改远程端服务器密钥
前言 一段时间没改密码后，远程就会自动提示CtrlAltEnd键修改密码。但我电脑是笔记本，没有end键。打开屏幕键盘按这三个键也没用。 解决方法 打开远程 1、远程端WINC 输入osk 可以发现打开了屏幕键盘 2、电脑键盘同时按住CtrlAlt（若自身电…...
lnmp指令
LNMP官网：https://lnmp.org 作者: licess adminlnmp.org 问题反馈&技术支持论坛：https://bbs.vpser.net/forum-25-1.html 打赏捐赠：https://lnmp.org/donation.html 自定义参数 lnmp.conf配置文件，可以修改lnmp.conf自定义下…...
Go语言每日一题——链表篇(七)
传送门 牛客面试笔试必刷101题 ----------------删除链表的倒数第n个节点 题目以及解析 题目 解题代码及解析 解析 这一道题与昨天的题目在解题思路上有一定的相似之处，都是基于双指针定义快慢指针，这里我们让快指针先走n步，又因为n一定…...
【stomp实战】websocket原理解析与简单使用
一、WebSocket 原理 WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并…...
2024.1.30力扣每日一题——使循环数组所有元素相等的最少秒数
2024.1.30 题目来源我的题解方法一 暴力模拟（无法通过）方法二 哈希表数学 题目来源 力扣每日一题；题序：2808 我的题解 方法一 暴力模拟（无法通过） 直接暴力枚举。记录每一个元素所在的位置，然…...