摘要随着中国传统智力游戏数字化发展的深入推进麻将作为极具代表性的国粹文化其智能化识别与分析技术具有重要的应用价值。本研究设计并实现了一套基于深度学习与现代化Web架构的麻将牌智能识别系统专门针对42种标准麻将牌型进行高精度检测与分类。系统创新性地集成了YOLOv8、YOLOv10、YOLOv11和YOLOv12四种先进的目标检测模型构建了可灵活切换的多模型识别引擎。通过构建包含6731张高质量标注图像的专用麻将数据集涵盖了万、条、筒、风牌、箭牌等各类牌型为模型的精准训练提供了可靠数据支撑。后端采用SpringBoot微服务框架结合前后端分离架构实现了完整的用户管理体系、多模态检测功能和智能分析模块。特别引入DeepSeek大型语言模型为识别结果提供牌局分析。所有检测记录与操作数据均持久化存储于MySQL数据库确保了系统的可追溯性和数据安全性。实验结果表明本系统在复杂背景、多牌重叠及不同光照条件下均能保持优异的识别性能为在线麻将游戏、智能教学、文化传承及娱乐应用等领域提供了创新的技术解决方案。关键词麻将识别YOLO系列算法目标检测SpringBootDeepSeek智能分析文化数字化Web应用系统目录摘要详细功能展示视频一、引言1. 研究背景与意义2. 国内外研究现状3. 本项目研究内容与创新点二、系统概述1. 核心检测能力2. 系统功能特色二、 系统核心特性概述功能模块登录注册模块可视化模块图像检测模块视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计模型训练结果YOLO概述YOLOv8YOLOv10YOLOv11YOLOv12主要改进前端代码展示后端代码展示详细功能展示视频项目安装教程详细功能展示视频基于深度学习的麻将识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibili基于深度学习的麻将识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1XjkuBDEut/?vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1XjkuBDEut/一、引言1. 研究背景与意义麻将作为中国传统文化的瑰宝拥有超过千年的历史在全球范围内享有广泛的群众基础。随着数字化时代的到来麻将的智能化识别与分析技术展现出巨大的应用潜力。在娱乐产业领域自动化的麻将牌识别可以推动在线麻将游戏的智能化升级在教育传承方面可以为初学者提供实时的牌局分析和指导在文化研究领域有助于麻将文化的数字化保存与传播在竞技比赛中能够实现自动计分和规则监督。然而麻将牌的自动识别面临诸多技术挑战牌面种类繁多通常包含42种基本牌型、图案复杂且相似度高、背景环境多变、牌面可能存在旋转和部分遮挡等。传统的人工识别或基于简单图像处理的方法难以满足实时性、准确性和鲁棒性的综合要求迫切需要引入先进的计算机视觉技术来解决这些问题。2. 国内外研究现状在麻将牌识别领域早期研究主要依赖于传统的图像处理技术如颜色分割、模板匹配和特征点检测等方法。这些方法在理想条件下有一定效果但对光照变化、视角变化和复杂背景的适应性较差。随着深度学习技术的发展基于卷积神经网络的方法逐渐成为主流通过端到端的学习方式显著提升了识别性能。YOLO系列算法以其优异的实时性能和检测精度在多个目标检测领域取得了成功应用。从YOLOv1到最新的YOLOv12算法通过持续优化网络结构、特征融合机制和训练策略不断突破检测精度与速度的平衡点。然而针对麻将牌这种具有复杂纹理和相似类别的小目标检测任务如何选择合适的YOLO变体并进行针对性优化仍需深入研究。3. 本项目研究内容与创新点本项目构建了一个集成多种先进技术的麻将牌智能识别系统主要创新点包括专业化麻将数据集构建针对42种标准麻将牌型构建了包含6731张高质量图像的数据集涵盖万子1-9万、条子1-9条、筒子1-9筒、风牌东、南、西、北、箭牌中、发、白等所有常见牌型包含了不同光照、角度、背景和摆放状态的变化。多版本YOLO模型综合评估首次在同一系统中集成YOLOv8、YOLOv10、YOLOv11和YOLOv12四种先进模型通过系统性对比实验为麻将识别这一特定任务提供了详尽的性能评估和选择依据。DeepSeek增强的智能分析功能创新性地将视觉识别与大语言模型相结合系统不仅能够识别牌面还能通过DeepSeek模型提供深度语义理解。完整的业务系统实现采用SpringBootVue.js的前后端分离架构实现了从用户管理、多模态检测图像、视频、实时摄像头、数据可视化到智能分析的完整业务流程。二、系统概述本项目旨在构建一个高效、准确、易用的麻将牌智能识别平台将最先进的深度学习算法与现代Web开发技术相结合为麻将相关的多个应用场景提供全面的技术支持。1. 核心检测能力全面牌型覆盖系统能够准确识别42种标准麻将牌包括万、条、筒的数字牌1-9和风牌、箭牌等特殊牌型。复杂场景适应针对麻将桌面的典型环境如绿色桌面、复杂背景、多牌重叠、光线变化等进行了专门优化。多角度识别支持不同拍摄角度下的牌面识别包括俯视、斜视等多种视角。2. 系统功能特色智能牌局分析通过DeepSeek大模型系统可以提供基于当前牌面的深度分析。多模态交互设计提供直观的Web界面支持图片上传、实时摄像头、视频文件等多种输入方式适应不同的使用场景。教学辅助功能针对麻将初学者系统可以提供牌局解说、规则提示、策略建议等教学辅助功能。文化展示模块集成麻将文化介绍、规则说明、历史渊源等文化展示内容促进传统文化的传播。性能监控与管理系统内置详细的性能监控和日志记录功能便于运维管理和性能优化。二、 系统核心特性概述功能模块✅ 用户登录注册支持密码检测保存到MySQL数据库。✅ 支持四种YOLO模型切换YOLOv8、YOLOv10、YOLOv11、YOLOv12。✅ 信息可视化数据可视化。✅ 图片检测支持AI分析功能deepseek✅ 支持图像检测、视频检测和摄像头实时检测检测结果保存到MySQL数据库。✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。✅ 用户管理模块管理员可以对用户进行增删改查。✅ 个人中心可以修改自己的信息密码姓名头像等等。登录注册模块可视化模块图像检测模块YOLO模型集成(v8/v10/v11/v12)DeepSeek多模态分析支持格式JPG/PNG/MP4/RTSP视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计users- 用户信息表imgrecords- 图片检测记录表videorecords- 视频检测记录表camerarecords- 摄像头检测记录表模型训练结果#coding:utf-8 #根据实际情况更换模型 # yolon.yaml (nano)轻量化模型适合嵌入式设备速度快但精度略低。 # yolos.yaml (small)小模型适合实时任务。 # yolom.yaml (medium)中等大小模型兼顾速度和精度。 # yolob.yaml (base)基本版模型适合大部分应用场景。 # yolol.yaml (large)大型模型适合对精度要求高的任务。 from ultralytics import YOLO model_path pt/yolo12s.pt data_path data.yaml if __name__ __main__: model YOLO(model_path) results model.train(datadata_path, epochs500, batch64, device0, workers0, projectruns, nameexp, )YOLO概述YOLOv8YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步YOLOv8 引入了新功能和优化使其成为各种应用中目标检测任务的理想选择。YOLOv8 的主要特性高级骨干和颈部架构YOLOv8 采用最先进的骨干和颈部架构从而改进了特征提取和目标检测性能。无锚点分离式 Ultralytics HeadYOLOv8 采用无锚点分离式 Ultralytics head与基于锚点的方法相比这有助于提高准确性并提高检测效率。优化的准确性-速度权衡YOLOv8 专注于在准确性和速度之间保持最佳平衡适用于各种应用领域中的实时对象检测任务。丰富的预训练模型:YOLOv8提供了一系列预训练模型以满足各种任务和性能要求使您更容易为特定用例找到合适的模型。YOLOv10YOLOv10 由 清华大学研究人员基于 Ultralytics Python构建引入了一种新的实时目标检测方法解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明它在多个模型尺度上都具有卓越的精度-延迟权衡。概述实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。架构YOLOv10 的架构建立在之前 YOLO 模型优势的基础上同时引入了几项关键创新。该模型架构由以下组件组成骨干网络负责特征提取YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)以改善梯度流并减少计算冗余。NeckNeck 的设计目的是聚合来自不同尺度的特征并将它们传递到 Head。它包括 PAN路径聚合网络层用于有效的多尺度特征融合。One-to-Many Head在训练期间为每个对象生成多个预测以提供丰富的监督信号并提高学习准确性。一对一头部在推理时为每个对象生成一个最佳预测以消除对NMS的需求从而降低延迟并提高效率。主要功能免NMS训练利用一致的双重分配来消除对NMS的需求从而降低推理延迟。整体模型设计从效率和准确性的角度对各种组件进行全面优化包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。增强的模型功能: 结合了大内核卷积和部分自注意力模块以提高性能而无需显着的计算成本。YOLOv11YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上在架构和训练方法上进行了重大改进使其成为各种计算机视觉任务的多功能选择。主要功能增强的特征提取:YOLO11 采用改进的 backbone 和 neck 架构从而增强了特征提取能力以实现更精确的目标检测和复杂的任务性能。优化效率和速度YOLO11 引入了改进的架构设计和优化的训练流程从而提供更快的处理速度并在精度和性能之间保持最佳平衡。更高精度更少参数随着模型设计的进步YOLO11m 在 COCO 数据集上实现了更高的 平均精度均值(mAP)同时比 YOLOv8m 少用 22% 的参数在不牺牲精度的情况下提高了计算效率。跨环境的适应性YOLO11 可以无缝部署在各种环境中包括边缘设备、云平台和支持 NVIDIA GPU 的系统从而确保最大的灵活性。广泛支持的任务范围无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)YOLO11 都旨在满足各种计算机视觉挑战。Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括增强的特征提取YOLO11 采用了改进的骨干网络和颈部架构增强了特征提取能力从而实现更精确的目标检测。优化的效率和速度改进的架构设计和优化的训练流程提供了更快的处理速度同时保持了准确性和性能之间的平衡。更高精度更少参数YOLO11m 在 COCO 数据集上实现了更高的平均 精度均值 (mAP)同时比 YOLOv8m 少用 22% 的参数在不牺牲精度的情况下提高了计算效率。跨环境的适应性YOLO11 可以部署在各种环境中包括边缘设备、云平台和支持 NVIDIA GPU 的系统。广泛支持的任务范围YOLO11 支持各种计算机视觉任务例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。YOLOv12YOLO12引入了一种以注意力为中心的架构它不同于之前YOLO模型中使用的传统基于CNN的方法但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新实现了最先进的目标检测精度同时保持了实时性能。尽管有这些优势YOLO12仍然是一个社区驱动的版本由于其沉重的注意力模块可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。主要功能区域注意力机制: 一种新的自注意力方法可以有效地处理大型感受野。它将 特征图 分成l个大小相等的区域默认为 4 个水平或垂直避免复杂的运算并保持较大的有效感受野。与标准自注意力相比这大大降低了计算成本。残差高效层聚合网络R-ELAN一种基于 ELAN 的改进的特征聚合模块旨在解决优化挑战尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入具有缩放的块级残差连接类似于层缩放。一种重新设计的特征聚合方法创建了一个类似瓶颈的结构。优化的注意力机制架构YOLO12 精简了标准注意力机制以提高效率并与 YOLO 框架兼容。这包括使用 FlashAttention 来最大限度地减少内存访问开销。移除位置编码以获得更简洁、更快速的模型。调整 MLP 比率从典型的 4 调整到 1.2 或 2以更好地平衡注意力和前馈层之间的计算。减少堆叠块的深度以改进优化。利用卷积运算在适当的情况下以提高其计算效率。在注意力机制中添加一个7x7可分离卷积“位置感知器”以隐式地编码位置信息。全面的任务支持: YOLO12 支持一系列核心计算机视觉任务目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。增强的效率: 与许多先前的模型相比以更少的参数实现了更高的准确率从而证明了速度和准确率之间更好的平衡。灵活部署: 专为跨各种平台部署而设计从边缘设备到云基础设施。主要改进增强的 特征提取:区域注意力: 有效处理大型感受野降低计算成本。优化平衡改进了注意力和前馈网络计算之间的平衡。R-ELAN使用 R-ELAN 架构增强特征聚合。优化创新残差连接引入具有缩放的残差连接以稳定训练尤其是在较大的模型中。改进的特征集成在 R-ELAN 中实现了一种改进的特征集成方法。FlashAttention: 整合 FlashAttention 以减少内存访问开销。架构效率:减少参数与之前的许多模型相比在保持或提高准确性的同时实现了更低的参数计数。简化的注意力机制使用简化的注意力实现避免了位置编码。优化的 MLP 比率调整 MLP 比率以更有效地分配计算资源。前端代码展示前端登录界面一小部分代码template div classlogin-container !-- 麻将背景 -- div classmahjong-background !-- 麻将粒子 -- div classmahjong-particles div classparticle v-forn in 30 :keyparticle-${n} :stylegetParticleStyle(n) div classparticle-glow/div /div /div !-- 麻将牌漂浮 -- div classmahjong-floating div classtile v-forn in 15 :keytile-${n} :stylegetTileStyle(n) {{ getRandomTile() }} /div /div !-- 连接网格 -- div classdetection-grid div classgrid-node v-forn in 25 :keynode-${n} :stylegetNodeStyle(n) div classnode-pulse/div /div /div !-- 麻将图案云 -- div classpattern-cloud div classpattern v-forn in 12 :keypattern-${n} :stylegetPatternStyle(n) {{ [,,,,,,][Math.floor(Math.random() * 7)] }} /div /div !-- 扫描线 -- div classdetection-scan div classscan-line v-forn in 6 :keyscan-${n} :stylegetScanStyle(n) div classscan-path/div /div /div /div !-- 登录主容器 -- div classlogin-main !-- 检测界面容器 -- div classdetection-container div classdetection-effect div classscan-pulse/div div classdetection-lines/div /div !-- 系统标志 -- div classsystem-brand div classbrand-icon div classmahjong-icon div classtile-structure div classtile-outline/div div classtile-dot dot-1/div div classtile-dot dot-2/div div classtile-dot dot-3/div div classtile-symbol/div /div div classmahjong-aura/div /div div classicon-glow/div /div div classbrand-text h1 classsystem-title span classmahjong-textMahjong/span span classdetection-textDetection/span /h1 p classsystem-subtitle智能麻将识别分析系统/p p classcompany-tag深度视觉计算 · AI识别实验室/p /div /div !-- 登录面板 -- div classlogin-panel div classpanel-header div classheader-line/div h2系统登录/h2 div classheader-line/div /div div classpanel-content el-form :modelruleForm :rulesregisterRules refruleFormRef !-- 用户名输入 -- el-form-item propusername div classinput-field div classfield-icon div classscan-icon/div /div el-input v-modelruleForm.username placeholder请输入操作员ID classdetection-input sizelarge focusonInputFocus bluronInputBlur / div classfield-glow/div /div div classinput-hint麻将分析师身份验证/div /el-form-item !-- 密码输入 -- el-form-item proppassword div classinput-field div classfield-icon div classsecure-icon/div /div el-input v-modelruleForm.password typepassword placeholder请输入系统密钥 show-password classdetection-input sizelarge focusonInputFocus bluronInputBlur / div classfield-glow/div /div div classinput-hint安全访问验证.../div /el-form-item !-- 登录按钮 -- el-form-item div classlogin-action el-button typeprimary classdetection-btn clicksubmitForm(ruleFormRef) mouseenteronBtnHover mouseleaveonBtnLeave div classbtn-content div classbtn-text span classtext-main启动麻将识别/span span classtext-subMAHJONG SCAN/span /div div classbtn-scan div classscan-dot/div div classscan-dot/div div classscan-dot/div /div /div div classbtn-energy/div div classbtn-particles div classparticle v-forn in 3 :keybtn-particle-${n}/div /div /el-button div classsystem-status div classstatus-indicator div classstatus-dot active/div span识别系统就绪/span /div div classstatus-info spanv3.1.5 • 深度视觉模式/span /div /div /div /el-form-item /el-form !-- 辅助选项 -- div classpanel-options router-link to/register classoption-link div classlink-icon div classmahjong-plus/div /div span注册新账户/span div classlink-trail/div /router-link /div /div /div !-- 系统信息 -- div classsystem-info div classinfo-grid div classinfo-item div classinfo-icon tile-icon-info/div /div div classinfo-item div classinfo-icon speed-icon/div div classinfo-content span classinfo-label识别速度/span span classinfo-value50ms/span /div /div div classinfo-item div classinfo-icon accuracy-icon/div div classinfo-content span classinfo-label识别精度/span span classinfo-value99.8%/span /div /div /div /div /div /div !-- 背景装饰元素 -- div classbackground-elements !-- 麻将数据流 -- div classmahjong-stream div classdata-flow v-forn in 8 :keyflow-${n} :stylegetStreamStyle(n) span v-fori in 15 :keydata-${n}-${i} {{ [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,][Math.floor(Math.random() * 30)] }} /span /div /div !-- 浮动麻将术语 -- div classfloating-terms div classfloating-term v-forn in 10 :keyterm-${n} :stylegetTermStyle(n) {{ [碰,杠,胡,吃,听,番,万,条,筒,风][Math.floor(Math.random() * 10)] }} /div /div /div /div /template script langts setup import { reactive, ref, computed, onMounted } from vue; import { useRoute, useRouter } from vue-router; import { ElMessage } from element-plus; import { useI18n } from vue-i18n; import Cookies from js-cookie; import { storeToRefs } from pinia; import { useThemeConfig } from //stores/themeConfig; import { initFrontEndControlRoutes } from //router/frontEnd; import { initBackEndControlRoutes } from //router/backEnd; import { Session } from //utils/storage; import { formatAxis } from //utils/formatTime; import { NextLoading } from //utils/loading; import type { FormInstance, FormRules } from element-plus; import request from //utils/request; // 定义变量内容 const { t } useI18n(); const storesThemeConfig useThemeConfig(); const { themeConfig } storeToRefs(storesThemeConfig); const route useRoute(); const router useRouter(); const formSize ref(default); const ruleFormRef refFormInstance(); // 定义表单数据 const ruleForm reactive({ username: , password: , }); // 校验规则 const registerRules reactiveFormRules({ username: [ { required: true, message: 请输入操作员ID, trigger: blur }, { min: 3, max: 20, message: 长度在3-20个字符, trigger: blur }, ], password: [ { required: true, message: 请输入系统密钥, trigger: blur }, { min: 5, max: 30, message: 长度在5-30个字符, trigger: blur }, ], }); // 粒子样式 const getParticleStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 4 Math.random() * 8; const duration 3 Math.random() * 4; const delay Math.random() * 2; const colorIndex Math.floor(Math.random() * 3); const colors [#FF9F1C, #2EC4B6, #E71D36]; return { left: ${left}%, top: ${top}%, width: ${size}px, height: ${size}px, backgroundColor: colors[colorIndex], animationDuration: ${duration}s, animationDelay: ${delay}s }; }; // 麻将牌样式 const getTileStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 40 Math.random() * 60; const duration 15 Math.random() * 20; const delay Math.random() * 5; const rotation Math.random() * 360; return { left: ${left}%, top: ${top}%, width: ${size}px, height: ${size * 1.3}px, fontSize: ${size * 0.8}px, animationDuration: ${duration}s, animationDelay: ${delay}s, transform: rotate(${rotation}deg), lineHeight: ${size * 1.3}px }; }; // 获取随机麻将牌 const getRandomTile () { const tiles [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]; return tiles[Math.floor(Math.random() * tiles.length)]; }; // 节点样式 const getNodeStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 6 Math.random() * 12; const duration 2 Math.random() * 3; const delay Math.random() * 2; return { left: ${left}%, top: ${top}%, width: ${size}px, height: ${size}px, animationDuration: ${duration}s, animationDelay: ${delay}s }; }; // 图案样式 const getPatternStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 24 Math.random() * 36; const duration 15 Math.random() * 20; const delay Math.random() * 5; const rotation Math.random() * 360; return { left: ${left}%, top: ${top}%, fontSize: ${size}px, animationDuration: ${duration}s, animationDelay: ${delay}s, transform: rotate(${rotation}deg) }; }; // 扫描线样式 const getScanStyle (index: number) { const left Math.random() * 100; const height 200 Math.random() * 400; const duration 3 Math.random() * 5; const delay Math.random() * 2; return { left: ${left}%, height: ${height}px, animationDuration: ${duration}s, animationDelay: ${delay}s }; }; // 数据流样式 const getStreamStyle (index: number) { const left Math.random() * 100; const duration 8 Math.random() * 12; const delay Math.random() * 5; return { left: ${left}%, animationDuration: ${duration}s, animationDelay: ${delay}s }; }; // 术语样式 const getTermStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const duration 10 Math.random() * 15; const delay Math.random() * 4; const opacity 0.1 Math.random() * 0.3; const fontSize 20 Math.random() * 30; return { left: ${left}%, top: ${top}%, animationDuration: ${duration}s, animationDelay: ${delay}s, opacity: opacity, fontSize: ${fontSize}px }; }; // 事件处理 const onInputFocus (event: Event) { const target event.target as HTMLElement; target.parentElement?.classList.add(focused); }; const onInputBlur (event: Event) { const target event.target as HTMLElement; target.parentElement?.classList.remove(focused); }; const onBtnHover (event: Event) { const btn event.currentTarget as HTMLElement; btn.classList.add(hover); }; const onBtnLeave (event: Event) { const btn event.currentTarget as HTMLElement; btn.classList.remove(hover); }; // 原有的登录逻辑保持不变 const currentTime computed(() { return formatAxis(new Date()); }); /* 检测按钮 */ .login-action { margin-top: 40px; } .detection-btn { width: 100%; height: 64px; padding: 0; border: none; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 159, 28, 0.9) 0%, rgba(46, 196, 182, 0.9) 50%, rgba(231, 29, 54, 0.9) 100%); position: relative; overflow: hidden; transition: all 0.3s ease; transform-style: preserve-3d; perspective: 1000px; } .btn-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 100%; transform: translateZ(20px); } .btn-text { display: flex; flex-direction: column; gap: 4px; } .text-main { color: white; font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .text-sub { color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .btn-scan { display: flex; align-items: center; gap: 4px; } .scan-dot { width: 6px; height: 6px; border-radius: 50%; background: white; animation: scanPulse 1.5s ease-in-out infinite; } .scan-dot:nth-child(2) { animation-delay: 0.2s; } .scan-dot:nth-child(3) { animation-delay: 0.4s; } keyframes scanPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }后端代码展示详细功能展示视频基于深度学习的麻将识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibili基于深度学习的麻将识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1XjkuBDEut/?vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1XjkuBDEut/项目安装教程https://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.clickYOLOspring bootvue项目环境部署教程YOLOv8、YOLOv10、YOLOv11、YOLOv12_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1YLsXzJE2X/?spm_id_from333.1387.homepage.video_card.clickvd_source549d0b4e2b8999929a61a037fcce3b0f