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

前端 | 自定义电子木鱼

news 2025/9/14 22:06:36

文章目录

  • 📚实现效果
  • 📚模块实现解析
    • 🐇html
    • 🐇css
    • 🐇javascript

📚实现效果

在这里插入图片描述

📚模块实现解析

🐇html

  • 搭个框架
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>喵喵大王立大功</title><link rel="stylesheet" href="./style.css">
</head>
<body><main id="board"><!-- 赛博小猫 --><div class="maomao"><img id="muyu" src="./src/xixi.png" alt="木鱼图片" onclick="addMerit()"><div id="merit"><p class="big">功德+1</p><p class="medium">好运+1</p><p class="small">烦恼-1</p></div></div></main>
</body>
<script src="./js/maomao.js"></script>
</html>

🐇css

  • 主要是设置了绝对定位，让它不管在哪个视口（电脑还是平板都在相对固定的位置正常显示）。
  • 然后还有一些字体显示效果（添加了一个渐隐动画）。
    * {padding: 0;margin: 0;
}/* 整个面板 */
#board {position: relative;/* 铺满整个视口 */width: 100vw;height: 100vh;background-color: #F1EEE7;overflow: hidden;font-family: FangSong;
}/* #region小猫start */
/* 赛博小猫 */
.maomao {width: 250px;height: 350px;text-align: center;position: absolute;bottom: -5vh;right: 13vw;display: inline-block; /* 50% 缩放，根据显示效果的凭感觉调整 */transform: scale(0.5); 
}
#merit {/* 让它绝对定位，在不同视口下都相对正常地显示 */position: absolute;width: 250px;height: 350px;bottom: -2%;right: -70%;display: none;text-align: center;/* 添加渐变消失动画 */animation: fadeOut 1.5s forwards; 
}
#merit p {margin: 15px; font-weight: bold;/* 颜色渐变效果 */transition: color 1s ease; 
}
#merit .big {font-size: 38px; color: #694b3c;
}
#merit .medium {font-size: 33px; color: #906c4a;
}
#merit .small {font-size: 28px; color: #99806c;
}@keyframes fadeOut {to {opacity: 0;}
}
/* #endregion小猫start */

🐇javascript

  • 非常简单的一集，就是一个点击效果。通过控制merit显示不显示，以实现木鱼敲击效果。
    function addMerit() {document.getElementById('merit').style.display = "block";setTimeout(function(){document.getElementById('merit').style.display = "none";}, 500);
}

相关文章：

前端 | 自定义电子木鱼

文章目录 &#x1f4da;实现效果&#x1f4da;模块实现解析&#x1f407;html&#x1f407;css&#x1f407;javascript &#x1f4da;实现效果 &#x1f4da;模块实现解析 &#x1f407;html 搭个框架<!DOCTYPE html> <html lang"en"> <head>&l…...

编程日记 2024/5/8 11:46:49

Android4.4真机移植过程笔记（一）

1、RK源码编译 获取内核源码&#xff1a; git clone git172.28.1.172:rk3188_kernel -b xtc_ok1000 内核编译环境&#xff1a; 从172.28.1.132编译服务器的/data1/ZouZhiPing目录下拷贝toolchain.tar.gz&#xff08;交叉编译工具链&#xff09;并解压到与rk3188_kernel同级目…...

编程日记 2024/5/8 11:45:47

一觉醒来 AI科技圈发生的大小事儿 05月07日

&#x1f4f3;从基因组到蛋白质组连续翻译&#xff0c;南开大学开发通用跨模态数据分析方法 南开大学的研究团队提出了scButterfly&#xff0c;一种基于双对齐变分自动编码器和数据增强方案的多功能单细胞跨模态翻译方法。该方法在保留细胞异质性、翻译各种背景数据集和揭示细…...

编程日记 2024/5/8 11:44:46

使用图网络和视频嵌入预测物理场

文章目录 一、说明二、为什么要预测&#xff1f;三、流体动力学模拟的可视化四、DeepMind神经网络建模五、图形编码六、图形处理器七、图形解码器八、具有不同弹簧常数的轨迹可视化九、预测的物理编码和推出轨迹 一、说明 这是一篇国外流体力学专家在可视化流体物理属性的设计…...

编程日记 2024/5/8 11:43:44

将java项目上传到GitHub步骤

文章目录 一、GitHub 作用二、github如何修改默认分支为master三、手把手教你把项目上传github上四、github怎么删除仓库或项目五、github配置ssh key密钥的步骤六、执行到push时报错的解决办法七、github怎么修改仓库语言 一、GitHub 作用 GitHub 是一个存放软件代码的网站&a…...

编程日记 2024/5/8 11:42:42

Electron项目中将CommonJS改成使用ES 模块（ESM）语法preload.js加载报错

问题 将Electron项目原CommonJS语法改成使用ES 模块&#xff08;ESM&#xff09;语法&#xff0c;preload.js一直加载不到&#xff0c;报错如下&#xff1a; VM111 renderer_init:2 Unable to load preload script: D:\Vue\wnpm\electron\preload.js VM111 renderer_init:2 E…...

编程日记 2024/5/8 11:41:41

Stable Diffusion 模型分享：Counterfeit-V3.0（动漫）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 高质量动漫风格模型。 条目内容类型大模型基础模…...

编程日记 2024/5/8 11:37:37

软件开发者如何保护自己的知识产权？

最近一个关于开源软件的知识产权纠纷的案例&#xff0c;非常有代表性&#xff0c; 其中涉及到的平台openwrt&#xff0c;一口君十几年前曾玩过&#xff0c; 通过这个案例&#xff0c;我们可以学习如何在今后工作中保护自己的知识产权&#xff0c; 以及如何合理直接或者间接利…...

编程日记 2024/5/8 11:36:36

Promise魔鬼面试题

文章目录 题目解析难点分析分析输出step1step2step3step4step5step6 参考/致谢&#xff1a;渡一袁老师 题目 Promise.resolve().then(() > {console.log(0);return Promise.resolve(4);}).then((res) > {console.log(res);});Promise.resolve().then(() > {console.l…...

编程日记 2024/5/8 11:35:34

Vue3+Nuxt3 从0到1搭建官网项目（SEO搜索、中英文切换、图片懒加载）

Vue2Nuxt2 从 0 到1 搭建官网~ Vue3Nuxt3 从0到1搭建官网项目 安装 Nuxt3&#xff0c;创建项目初始化的 package.json项目结构初始化项目pages 文件下创建index.vue引入sass修改 app.vue 文件查看效果 配置公共的css、metaassets下的cssreset.scss 重置文件common.scss 配置nux…...

编程日记 2024/5/8 11:34:32

面试经典150题——三数之和

面试经典150题 day29 题目来源我的题解方法一 暴力解法 超时方法二 扩展两数之和&#xff08;双指针&#xff09;方法三 扩展为通用的n数之和 题目来源 力扣每日一题&#xff1b;题序&#xff1a;15 我的题解 方法一 暴力解法 超时 进行三重循环遍历&#xff0c;判断和是否为…...

编程日记 2024/5/8 11:33:30

go动态创建/增加channel并处理数据

背景描述 有一个需求&#xff0c;大概可以描述为&#xff1a;有多个websocket连接&#xff0c;因此消息会并发地发送过来&#xff0c;这些消息中有一个标志可以表明是哪个连接发来的消息&#xff0c;但只有收到消息后才能建立channel或写入已有channel&#xff0c;在收消息前无…...

编程日记 2024/5/8 11:31:27

asp.net成绩查询系统

说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net架构和sql server数据库 功能模块&#xff1a; asp.net成绩查询系统 学生功能有查看成绩和修改账号密码等 后台管理员可以进行用户管理 管理员添加管理员查询注…...

编程日记 2024/5/8 11:30:26

Express路由

什么是路由 官方定义&#xff1a;路由确定了应用程序如何响应客户端对特定端点的请求。 路由的使用 一个路由的组成有 请求方法、路径 和 回调函数 组成。 Express中提供了一些列方法&#xff0c;可以很方便的使用路由&#xff0c;使用格式如下&#xff1a; app.<metho…...

编程日记 2024/5/8 11:25:18

在做题中学习(53): 寻找旋转数组中的最小值

153. 寻找旋转排序数组中的最小值 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a;O(logn)->很可能就是二分查找 思路&#xff1a;再看看题目要求&#xff0c;可以画出旋转之后数组中元素的大小关系&#xff1a; 首先&#xff0c;数组是具有二段性的(适配二分查…...

编程日记 2024/5/8 11:24:17

C#语言进阶(三) 元组

总目录 C# 语法总目录 元组目录 元组1. 元组元素命名2. 元组的解构3. 元组的比较 元组 元组(tuple)是一组存储值的便捷方式。 元组的目的主要是&#xff0c;不使用out参数而从方法中返回多个值。(匿名类型无法做这个操作)元组能做匿名类型所有操作。 元组是值类型&#xff0…...

编程日记 2024/5/8 11:23:15

实用的Chrome 浏览器命令

Google Chrome 浏览器提供了许多快捷命令和实用功能&#xff0c;可以帮助用户提高效率和改善浏览体验。这里列举了一些非常实用的Chrome浏览器命令&#xff1a; 1. **CtrlT** / **CmdT** - 打开一个新的标签页。 2. **CtrlShiftT** / **CmdShiftT** - 重新打开最后关闭的标签页…...

编程日记 2024/5/8 11:20:11

IDEA远程连接docker服务，windows版docker desktop

1.windows上安装docker desktop docker desktop下载地址&#xff1a;Docker Desktop: The #1 Containerization Tool for Developers | Docker 有的windows系统不支持安装docker desktop 安装完之后我们可以直接打开&#xff0c;可以选择不登录使用 我们用IDEA连接到docker …...

编程日记 2024/5/8 11:19:09

Rust 和 Go 哪个更好？

在讨论 Rust 与 Go 两种编程语言哪种更优秀时&#xff0c;我们将探讨它们在性能、简易性、安全性、功能、规模和并发处理等方面的比较。同时&#xff0c;我们看看它们有什么共同点和根本的差异。现在就来看看这个友好而公平的对比。 Rust 和 Go 都是优秀的选择 首先&#xff…...

编程日记 2024/5/8 11:18:08

【免费Java系列】大家好 ,今天是学习面向对象高级的第八天点赞收藏关注,持续更新作品 !

这是java进阶课面向对象第一天的课程可以坐传送去学习http://t.csdnimg.cn/Lq3io day08-Map集合、Stream流、File类 一、Map集合 同学们&#xff0c;在前面几节课我们已经学习了Map集合的常用方法&#xff0c;以及遍历方式。 下面我们要学习的是Map接口下面的是三个实现类H…...

编程日记 2024/5/8 11:17:06

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/9/14 13:42:19

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/9/3 23:09:31

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/9/9 12:19:24

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/9/3 6:05:43

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/9/6 19:53:03