红包雨html
1、分享一个红包雨html代码。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>红包雨小游戏</title><style>body {margin: 0;overflow: hidden;background-color: #dff9fb; /* 设置背景颜色 */font-family: Arial, sans-serif;}#container {position: relative;width: 80vw; /* 将宽度设置为80% */height: 80vh; /* 将高度设置为80% */overflow: hidden;margin: 10vh auto; /* 垂直居中 */}#score {position: fixed;top: 20px;left: 20px;font-size: 24px;color: #333;background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */padding: 10px 15px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.red-envelope {position: absolute;width: 50px;height: 70px;color: white;font-size: 20px;text-align: center;line-height: 70px;border-radius: 5px;cursor: pointer;user-select: none;font-family: "Microsoft YaHei", Arial, sans-serif;}.red {background-color: #ff4d4f; /* 红色 */}.gold {background-color: #ffcc00; /* 金色 */}.blue {background-color: #007bff; /* 蓝色 */}.green {background-color: #28a745; /* 绿色 */}@keyframes fall {0% {transform: translateY(0);}100% {transform: translateY(100vh);}}.fall {animation: fall linear forwards;}#reward {position: fixed;top: 100px;left: 50%;transform: translateX(-50%);font-size: 30px;font-weight: bold;color: #fff;background: linear-gradient(135deg, #ff7e5f, #feb47b); /* 渐变色 */padding: 20px 40px;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);display: none; /* 初始隐藏 */z-index: 10; /* 确保在最上层 */animation: bounce 1s ease-out infinite; /* 添加弹跳动画 */}@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-10px);}60% {transform: translateY(-5px);}}.reward-text {font-size: 36px;font-weight: bold;color: #fff;}</style>
</head>
<body><div id="score">获得红包数量: <span id="count">0</span></div><div id="reward"><span class="reward-text">恭喜你！获得额外奖励！</span></div><div id="container"></div><script>const container = document.getElementById('container');const countDisplay = document.getElementById('count'); // 用于显示红包数量const rewardDisplay = document.getElementById('reward'); // 用于显示奖励消息const colors = ['red', 'gold', 'blue', 'green']; // 红包颜色数组let score = 0; // 记录获得的红包数量function createRedEnvelope() {const envelope = document.createElement('div');envelope.className = 'red-envelope ' + colors[Math.floor(Math.random() * colors.length)]; // 随机选择颜色envelope.textContent = '红包';envelope.style.left = Math.random() * (container.clientWidth - 50) + 'px'; // 随机位置，确保在画布范围内envelope.style.top = '-70px'; // 初始位置在屏幕上方// 添加动画类envelope.classList.add('fall');// 点击事件envelope.addEventListener('click', () => {score++; // 增加红包数量countDisplay.textContent = score; // 更新显示数量// 每获得 5 个红包，显示奖励if (score % 5 === 0) {showReward();}container.removeChild(envelope); // 移除红包});// 设置动画持续时间envelope.style.animationDuration = Math.random() * 2 + 3 + 's'; // 随机时长// 添加到容器container.appendChild(envelope);// 动画结束后移除红包envelope.addEventListener('animationend', () => {container.removeChild(envelope);});}function showReward() {rewardDisplay.style.display = 'block'; // 显示奖励消息setTimeout(() => {rewardDisplay.style.display = 'none'; // 3秒后隐藏奖励消息}, 3000);}// 每500毫秒生成一个红包（增加红包数量）setInterval(createRedEnvelope, 500);</script>
</body>
</html>
相关文章：
红包雨html
1、分享一个红包雨html代码。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>红包雨小游戏</ti…...
js 基础补充3
1. 闭包 在函数内部定义的函数，可以访问改函数的属性和方法 私有属性 延长变量的生命周期，更好的避免命名冲突 缺点：内存消耗比较大，不建议频繁使用 2. js 原型 原型链 访问对像的属性方法，不光会在对象上查找还会在…...
Invalid bean definition with name ‘employeeMapper‘ defined in file
参考以下博客： <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-starter</artifactId><version>3.5.7</version> </dependency> 总结： 1. 拉取老项目的时候要特…...
悦享驾驶，乐在旅途，首选江铃集团新能源易至EV3青春版
金秋时节，天高气爽，正是出游的好时节。不论是家庭自驾游，还是朋友结伴出游，一款好看又好开的车绝对是提升旅行品质的重要因素。江铃集团新能源易至汽车EV3青春版，凭借其超高安全性、便捷操作性、卓越性能，成…...
测试WIFI和以太网的TCP带宽、UDP带宽和丢包率、延时
一、测试TCP、UDP的带宽 作为服务器：iperf3 -s -i 1 （或者用CloudCampus软件，或者iperf magic） Wi-Fi 发送、接收吞吐率的测试_magic iperf-CSDN博客 车机作为iperf3服务器，电脑作为iperf3得客户端，分别…...
redis 第155节答疑 源码分析Hash类型ziplist结构和zlentry实体解析
155属性 zlbytes zltail zllen entryX zlend 类型 uint32 t uint32 t uint16 t 列表节点 uint8 t 长度 4字节 4字节 2字节 不定 1字节 用途 记录整个压缩列表占用的内存字节数:在对压缩列表进行内存重分配，或者计算 zlend 的位置时使用 记录压缩列表表尾节点距离压缩…...
IDE使用技巧与插件推荐
集成开发环境（IDE）是开发者日常工作中的重要工具，合理使用IDE和合适的插件，能大大提高开发效率。本文将分享常见IDE（如VS Code、IntelliJ IDEA等）的一些高效使用技巧，以及开发过程中常用的插件推…...
1020接口测试面试题随记
1.测试中对于上下游承接的业务是怎么处理的 针对上下游承接的业务，我会采取以下措施进行处理：首先，明确上下游系统的接口和依赖关系，确保理解数据流和业务逻辑的连接点。其次，进行接口测试，验证上下游系统…...
Zotero7最新（2024）翻译问题——配置 百度API翻译
在使用翻译之前，首先要确保已经安装了插件：Translate for Zotero 关于插件的安装可以参考这篇文章： Zotero7最新（2024）安装、配置步骤-CSDN博客 接下来进入正题。 当使用Zotero7对英文文献翻译时，可能会…...
python程序设计员—练习笔记
目录 基础处理 字符串列表字典运算符正则表达式re库requestsBeautiful Soupjieba库分词模式基于TF-IDF算法的关键词提取 基于TextRank算法的关键词提取pandas 打开有多个表的.xlsx文件 基础处理 字符串 str_ str_.lower()lower()函数：将字符中的大写字母转换成小…...
1.DBeaver连接hive数据库
1.hive开启远程服务，linux中直接输入：hiveserver2 2.解压dbeaver和hive-jdbc-2.1.1.zip 3.双击打开 4.数据库，新建连接 5.搜索hive 6.配置参数 7.编辑驱动设置 8.添加jar包 9.测试连接 10.右击，新建sql编辑器 11.执行sql 12.调整字…...
CODESYS随机动态图案验证码制作详细案例（三）
#使用CODESYS软件模仿网页端动态图案验证码的制作详细案例# 前言： 通过上篇图案验证码的实际测试，我们已经完成了该案例的制作，但是在项目应用中，我们想对该功能直接调用，就需要将具有一定功能的程序代码或可视化进行封装成库文件。我们熟知，CODESYS有丰富的库文件，有…...
NodeJS 使用百度翻译API
在大数据处理中，经常需要大批量地翻译短小的文字，使用在线翻译平台的API 调用能够大幅度提高效率。 最近尝试了一下。 第一步在百度翻译开放平台注册 百度翻译开放平台 (baidu.com) 申请APPID 和SECRET加密码 源代码（mjs） …...
摩熵数科数据产品阵容BCPM
摩熵数科基本介绍 摩熵数科（成都）医药科技有限公司BCPMdata Pharma Technology （Chengdu）Co.,Ltd以“探索生命科学数据本源，构建全产业链数据应用生态”为愿景，致力于成为生命科学领域全球领先的数据系统与…...
ros2 .idl文件生成C、C++代码
一、包目录结构 rosidl_generator_c 依赖rosidl_cmake、rosidl_typesupport_interface、ament_index_python、rosidl_parser rosidl_generator_cpp 依赖 rosidl_parser、rosidl_runtime_cpp、rosidl_generator_c rosidl_parser ：The parser for .idl ROS interfa…...
scrapy的xpath在控制台可以匹配,但是到了代码无法匹配(无法匹配tbody标签)
问题 使用xpath-helper可以匹配到,然后scrapy却无法 然后写入html来看看 发现根本就没有tbody,太可恶了 解决 方法1 不使用tbody就可以 方法2 使用或运算符 | big_list response.xpath("//div[classChannelClasssNavContent]/table/tbody/tr[1]/td/table/tbody/t…...
OpenCL内存模型
OpenCL将内存划分成主机内存和设备内存。主机内存可在主机上使用，其并不在OpenCL的定义范围内。使用对应的OpenCL API可以进行主机和设备的数据传输，或者通过共享虚拟内存接口进行内存共享。而设备内存，指定是能在执行内核中使用的内存空间。…...
Commvault Cloud如何改变网络弹性游戏规则？
近段时间有点被Commvault与AWS“刷屏”了：9月，Commvault宣布将收购AWS关键云数据保护领域技术领导者Clumio公司；10月，Commvault宣布将在AWS上推出Commvault Cloud网络弹性平台。 种种偶然背后往往隐藏着必然。作为混合云网络弹性和…...
echarts环形饼图自定义边框、标题及图例
目录 1、官网找示例 2、初步改造有个雏形 3、细节改造和优化 4、全部代码 5、原始效果和最终效果对比 看下效果图，和普通的饼图很明显的区别就是： 1有明显的白色边框线 2圆环中心自定义内容标题 3需要设置图例位置与内容 我通常的实现思路就是官网找例子再一步一步改…...
Android SELinux——上下文Context源码（十）
通过前面的文章我们知道，SELinux 中的上下文（contexts）包含很多类型，这里我们就来看看Androd 源码中 上下文 SELinux Contexts 的代码结构。 一、Contexts源码 源码位置：/system/sepolicy/private 1、file_contexts file_contexts 文件用于定义系统中各个文件和…...
如何快速实现Font Awesome图标字体文件格式转换：终极在线工具指南
如何快速实现Font Awesome图标字体文件格式转换：终极在线工具指南 【免费下载链接】Font-Awesome The iconic SVG, font, and CSS toolkit 项目地址: https://gitcode.com/GitHub_Trending/fo/Font-Awesome Font Awesome作为一款标志性的SVG、字体和CSS工具包…...
别再被‘小样本’难倒了！用Python的PyMC3库实战层次贝叶斯模型
用PyMC3解锁小样本分析：层次贝叶斯建模实战指南 当你的数据集像便利店冰柜里的酸奶——每个品类只有零星几瓶时，传统统计方法往往会束手无策。想象你正分析20个城市的新开门店周销售额，每个城市却只有3-5条数据记录。这时，层次贝叶…...
brpc并发编程模型性能对比：基准测试结果
brpc并发编程模型性能对比：基准测试结果 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendation etc. &…...
OpenClaw+GLM-4.7-Flash成本对比：自建模型比API调用节省30%token消耗
OpenClawGLM-4.7-Flash成本对比：自建模型比API调用节省30%token消耗 1. 为什么需要关注token消耗 上周五凌晨两点，我的OpenClaw突然停止了周报自动化任务。查看日志发现是API额度耗尽——当月累计消耗已超过商用GLM-4.7-Flash的套餐限额。这次意外让我…...
Qwen2.5-VL-7B-Instruct应用场景：法律合同关键条款图文定位与摘要生成
Qwen2.5-VL-7B-Instruct应用场景：法律合同关键条款图文定位与摘要生成 想象一下，你是一位法务人员或商务经理，面前摆着一份几十页、图文并茂的复杂合同。你需要快速找到关于“违约责任”、“付款条件”或“知识产权归属”的关键条款。传统的…...
Ubuntu 20.04 LTS下FinalShell安装全攻略（附一键脚本及常见问题解决）
Ubuntu 20.04 LTS下FinalShell终极配置指南：从安装到高阶应用 为什么开发者需要FinalShell？ 作为一名长期使用Ubuntu进行远程服务器管理的开发者，我深知一款优秀的SSH工具对工作效率的影响。FinalShell作为跨平台的国产SSH工具，…...
春联生成模型-中文-base多线程批量生成教程，为公司百名员工定制春节祝福
春联生成模型-中文-base多线程批量生成教程，为公司百名员工定制春节祝福 春节将至，为公司员工准备个性化春联是传递祝福的好方式。传统手工创作耗时耗力，而春联生成模型-中文-base结合多线程技术，能高效完成批量定制。本文将详细…...
功能齐全的屏幕截图C++实现详解（附源码）
目录 1、概述 2、屏幕截图的主要功能点 3、屏幕截图的主体实现思路 3.1、截图主窗口全屏置顶 3.2、桌面灰化 3.3、窗口自动套索 3.4、区域放大 3.5、截取区域的选择 3.5、截图工具条 3.6、矩形等图元的绘制 4、桌面灰化的实现细节 5、窗口自动套索实现 6、区域放大…...
百度网盘提速全攻略：从限速对抗到效能优化的实战指南
百度网盘提速全攻略：从限速对抗到效能优化的实战指南 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 诊断限速瓶颈：从协议层破解速度封印 原理图解&am…...
【FastAPI 2.0流式AI响应核心机密】：3大异步协程调度陷阱、2处EventSource底层劫持点、1个未公开的StreamingResponse状态机设计缺陷
第一章：FastAPI 2.0流式AI响应的架构演进与设计哲学FastAPI 2.0 将流式响应能力从实验性支持提升为核心原语，其底层重构了 Starlette 的响应生命周期与事件循环集成机制，使 Server-Sent Events（SSE）、text/event-strea…...