html文字红色粗体，闪烁渐变动画效果，中英文切换版本
1. 代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>红色粗体闪烁文字表格 - 中英文切换</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #333;}.container {max-width: 900px;width: 100%;background: white;border-radius: 12px;box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);overflow: hidden;position: relative;}header {background: linear-gradient(135deg, #ff5252, #b33939);color: white;padding: 25px 30px 35px;text-align: center;position: relative;}h1 {font-size: 2.2rem;margin-bottom: 10px;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.subtitle {font-size: 1.1rem;opacity: 0.9;max-width: 600px;margin: 0 auto;line-height: 1.6;}/* 语言切换按钮 */.language-switcher {position: absolute;top: 20px;right: 20px;display: flex;gap: 10px;}.lang-btn {padding: 8px 18px;border: none;border-radius: 30px;background: rgba(255, 255, 255, 0.2);color: white;font-weight: 600;cursor: pointer;transition: all 0.3s;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.3);}.lang-btn:hover {background: rgba(255, 255, 255, 0.3);}.lang-btn.active {background: white;color: #ff5252;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}/* 闪烁动画 */@keyframes blink {0% { opacity: 1; text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);}50% { opacity: 0.4; text-shadow: 0 0 5px rgba(255, 0, 0, 0.2);}100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);}}.blink-text {animation: blink 1.2s infinite;color: #ff0000;font-weight: bold;}/* 表格样式 */.table-container {padding: 0 20px 20px;}table {width: 100%;border-collapse: collapse;margin: 25px 0;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);border-radius: 10px;overflow: hidden;}th {background: linear-gradient(to right, #4a69bd, #6a89cc);color: white;padding: 16px 15px;text-align: left;font-weight: 600;font-size: 1.05rem;}td {padding: 14px 15px;border-bottom: 1px solid #eef1f5;color: #333;transition: all 0.3s;}tr:nth-child(even) {background-color: #f8f9fc;}tr:hover td {background-color: #edf2ff;transform: translateX(5px);}.status-cell {font-weight: bold;}.explanation {padding: 25px;background: #f0f4ff;border-top: 1px solid #e0e6ff;margin-top: 10px;}.explanation h3 {color: #4a69bd;margin-bottom: 15px;font-size: 1.3rem;display: flex;align-items: center;gap: 10px;}.code {background: #2d3748;color: #e2e8f0;padding: 20px;border-radius: 8px;margin-top: 15px;font-family: 'Courier New', monospace;font-size: 0.95rem;overflow-x: auto;line-height: 1.5;}footer {text-align: center;padding: 20px;color: #666;font-size: 0.9rem;background: #f8f9fc;border-top: 1px solid #e0e6ff;}@media (max-width: 768px) {h1 {font-size: 1.8rem;}.language-switcher {position: relative;top: auto;right: auto;justify-content: center;margin-top: 15px;}th, td {padding: 12px 10px;font-size: 0.9rem;}}</style>
</head>
<body><div class="container"><header><div class="language-switcher"><button class="lang-btn active" data-lang="zh">中文</button><button class="lang-btn" data-lang="en">English</button></div><h1 id="title">红色粗体闪烁文字表格</h1><p class="subtitle" id="subtitle">状态列中的文字具有红色、粗体和闪烁效果，可通过右上角按钮切换中英文</p></header><div class="table-container"><table><thead><tr><th id="col-id">ID</th><th id="col-task">任务</th><th id="col-assignee">负责人</th><th id="col-deadline">截止日期</th><th id="col-status">状态</th></tr></thead><tbody><tr><td>T001</td><td id="task1">网站首页设计</td><td>张三</td><td>2023-12-15</td><td class="status-cell blink-text" id="status1">紧急</td></tr><tr><td>T002</td><td id="task2">数据库优化</td><td>李四</td><td>2023-12-10</td><td class="status-cell" id="status2">正常</td></tr><tr><td>T003</td><td id="task3">用户注册功能</td><td>王五</td><td>2023-12-05</td><td class="status-cell blink-text" id="status3">超期</td></tr><tr><td>T004</td><td id="task4">服务器维护</td><td>赵六</td><td>2023-12-20</td><td class="status-cell" id="status4">进行中</td></tr><tr><td>T005</td><td id="task5">支付接口集成</td><td>钱七</td><td>2023-12-12</td><td class="status-cell blink-text" id="status5">高风险</td></tr></tbody></table></div><div class="explanation"><h3><i class="fas fa-code"></i> <span id="explanation-title">实现说明</span></h3><p id="explanation-content">状态列中带有红色粗体并闪烁的文字是通过以下CSS实现的：</p><div class="code">
/* 定义闪烁动画 */
@keyframes blink {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}/* 应用样式 */
.blink-text {animation: blink 1.2s infinite; /* 持续闪烁 */color: #ff0000; /* 红色文字 */font-weight: bold; /* 粗体 */
}</div><p style="margin-top: 15px;" id="usage-instruction">在表格单元格中添加 <code>class="blink-text"</code> 即可实现此效果。</p></div><footer><p id="footer-text">HTML表格红色粗体闪烁文字示例 - 支持中英文切换</p></footer></div><script>// 语言翻译数据const translations = {zh: {title: "红色粗体闪烁文字表格",subtitle: "状态列中的文字具有红色、粗体和闪烁效果，可通过右上角按钮切换中英文","col-id": "ID","col-task": "任务","col-assignee": "负责人","col-deadline": "截止日期","col-status": "状态",task1: "网站首页设计",task2: "数据库优化",task3: "用户注册功能",task4: "服务器维护",task5: "支付接口集成",status1: "紧急",status2: "正常",status3: "超期",status4: "进行中",status5: "高风险","explanation-title": "实现说明","explanation-content": "状态列中带有红色粗体并闪烁的文字是通过以下CSS实现的：","usage-instruction": "在表格单元格中添加 <code>class=\"blink-text\"</code> 即可实现此效果。","footer-text": "HTML表格红色粗体闪烁文字示例 - 支持中英文切换"},en: {title: "Red Bold Blinking Text Table",subtitle: "Text in the status column has red, bold and blinking effects. Switch between languages using the top-right buttons.","col-id": "ID","col-task": "Task","col-assignee": "Assignee","col-deadline": "Deadline","col-status": "Status",task1: "Homepage Design",task2: "Database Optimization",task3: "User Registration Feature",task4: "Server Maintenance",task5: "Payment Gateway Integration",status1: "Urgent",status2: "Normal",status3: "Overdue",status4: "In Progress",status5: "High Risk","explanation-title": "Implementation Details","explanation-content": "The red bold blinking text effect is achieved with the following CSS:","usage-instruction": "Add <code>class=\"blink-text\"</code> to any table cell to apply this effect.","footer-text": "HTML Table with Red Bold Blinking Text - Supports English/Chinese"}};// 从localStorage获取语言设置或默认为中文let currentLang = localStorage.getItem('language') || 'zh';// 应用翻译function applyTranslations(lang) {const elements = document.querySelectorAll('[id]');elements.forEach(element => {const id = element.id;if (translations[lang] && translations[lang][id]) {if (id === 'usage-instruction' || id === 'explanation-content') {element.innerHTML = translations[lang][id];} else {element.textContent = translations[lang][id];}}});// 更新按钮状态document.querySelectorAll('.lang-btn').forEach(btn => {if (btn.dataset.lang === lang) {btn.classList.add('active');} else {btn.classList.remove('active');}});}// 初始化页面document.addEventListener('DOMContentLoaded', function() {applyTranslations(currentLang);// 添加语言切换事件document.querySelectorAll('.lang-btn').forEach(button => {button.addEventListener('click', function() {const lang = this.dataset.lang;currentLang = lang;localStorage.setItem('language', lang);applyTranslations(lang);});});});</script>
</body>
</html>
2. 效果
相关文章：
html文字红色粗体，闪烁渐变动画效果，中英文切换版本
1. 代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>红色粗体闪烁文字表格 - 中英文切换</t…...
六、【ESP32开发全栈指南：深入解析ESP32 IDF中的WiFi AP模式开发】
1. 引言：AP模式的核心价值 ESP32的AP（Access Point）模式使设备成为独立无线热点，适用于： 设备配网（SmartConfig）无路由器场景的本地组网数据直采终端（传感器集中器）临时…...
基于Django开发的运动商城系统项目
运动商城系统项目描述 运动商城系统是一个基于现代Web技术构建的电子商务平台，专注于运动类商品的在线销售与管理。该系统采用前后端分离架构，前端使用Vue.js实现动态交互界面，后端基于Django框架提供RESTful API支持，数据库采用…...
Python训练营打卡Day42
知识点回顾 回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例 1. 回调函数（Callback Function） 回调函数是作为参数传递给另一个函数的函数，目的是在某个事件发生后执行。 def fetch_data(callback):# 模拟数据获取data {&quo…...
https相比http的区别
https相比http的区别 https相比http的区别在于:https使用了SSL/TLS加密协议，确保数据传输的安全性和完整性，通信时需要证书验证。 https相比于http的区别主要在于安全性。https使用SSL/TLS加密传输数据，确保数据在客户端和服务器之间的通信…...
【Linux】为 Git 设置 Commit 提交模板方法，可统一个人或者项目的提交风格
为 Git 设置 Commit 提交模板 新建模板文件。注意之后不能删除该文件。 gedit ~/.gitmessage.txt粘贴自己的模板。可以给 AI 提自己的需求，定制一个模板，例如 # <type>(<scope>): <description> # # [optional body] # # [optional…...
caliper config.yaml 文件配置，解释了每个配置项的作用和注意事项
以下是添加了详细备注的 config.yaml 文件配置，解释了每个配置项的作用和注意事项： # Caliper 性能测试主配置文件 # 文档参考: https://hyperledger.github.io/caliper/# 测试轮次配置 - 可以定义多个测试轮次，每个轮次测试不同的合约或场景 rounds:# 第一个测试轮次 - 测试…...
结构体和指针1
#include <iostream> using namespace std; #include <string> struct Student{ int age; string name; double score; }; int main() { //静态分配 Student s1 {18,"小明",88.5}; //cout << s1.name<<"的成绩为…...
Python60日基础学习打卡Day45
之前的神经网络训练中，为了帮助理解借用了很多的组件，比如训练进度条、可视化的loss下降曲线、权重分布图，运行结束后还可以查看单张图的推理效果。 如果现在有一个交互工具可以很简单的通过按钮完成这些辅助功能那就好了，他就是…...
《Java 并发神器：深入理解CompletableFuture.supplyAsync与线程池实战优化》
一、背景介绍 在 Java 后端开发中，我们经常会遇到以下问题： 需要并行执行多个数据库查询或远程调用；单线程执行多个 .list() 方法时耗时过长；希望提升系统响应速度，但又不想引入过多框架。 这时，Java 8 …...
【Visual Studio 2022】卸载安装，ASP.NET
Visual Studio 2022 彻底卸载教程 手动清理残留文件夹 删除C:\Program Files\Microsoft Visual Studio 是旧版本 Visual Studio 的残留安装目录 文件夹名对应的 Visual Studio 版本Microsoft Visual Studio 9.0Visual Studio 2008Microsoft Visual Studio 10.0Visual Studio…...
JVM中的各类引用
JVM中的各类引用 欢迎来到我的博客：TWind的博客 我的CSDN:：Thanwind-CSDN博客 我的掘金：Thanwinde 的个人主页 对象 众所不周知，Java中基本所有的对象都是分配在堆内存之中的，除开基本数据类型在栈帧中以外…...
thinkphp-queue队列随笔
安装 # 创建项目 composer create-project topthink/think 5.0.*# 安装队列扩展 composer require topthink/think-queue 配置 // application/extra/queue.php<?php return [connector > Redis, // Redis 驱动expire > 0, // 任务的过期时间…...
STM32标准库-TIM输出比较
文章目录 一、输出比较二、PWM2.1简介2.2输出比较通道（高级）2.3 输出比较通道（通用）2.4输出比较模式2.5 PWM基本结构1、时基单元2、输出比较单元3、输出控制（绿色右侧）4、右上波形图（以绿色脉冲…...
科技创新驱动人工智能，计算中心建设加速产业腾飞
在科技飞速发展的当下，人工智能正以前所未有的速度融入我们的生活。一辆辆无人驾驶的车辆在道路上自如地躲避车辆和行人，行驶平稳且操作熟练；刷脸支付让购物变得安全快捷，一秒即可通行。这些曾经只存在于想象中的场景，…...
figma 和蓝湖 有什么区别
以下是 Figma 和蓝湖的详细对比分析： 核心定位区别 维度Figma蓝湖本质全功能云端设计工具设计协作与交付平台核心功能设计原型协作开发交付设计稿交付标注切图协作设计能力✅ 完整矢量设计工具❌ 无设计功能（需导入其他工具文件）适用阶段全流…...
SQLServer中的存储过程与事务
一、存储过程的概念 1. 定义 存储过程（Stored Procedure）是一组预编译的 SQL 语句的集合，它们被存储在数据库中，可以通过指定存储过程的名称并执行来调用它们。存储过程可以接受输入参数、输出参数，并且可以返回执行…...
STM32H562----------ADC外设详解
1、ADC 简介 STM32H5xx 系列有 2 个 ADC，都可以独立工作，其中 ADC1 和 ADC2 还可以组成双模式(提高采样率)。每个 ADC 最多可以有 20 个复用通道。这些 ADC 外设与 AHB 总线相连。 STM32H5xx 的 ADC 模块主要有如下几个特性： 1、可配置 12 位、10 位、8 位、6 位分辨率，…...
uniapp 安卓 APP 后台持续运行（保活）的尝试办法
在移动应用开发领域，安卓系统的后台管理机制较为复杂，应用在后台容易被系统回收，导致无法持续运行。对于使用 Uniapp 开发的安卓 APP 来说，实现后台持续运行（保活）是很多开发者面临的重要需求，比…...
AI大数据模型如何与thingsboard物联网结合
一、 AI大数据与ThingsBoard物联网的结合可以从以下几个方面实现： 1. 数据采集与集成 设备接入：ThingsBoard支持多种通信协议（如MQTT、CoAP、HTTP、Modbus、OPC-UA等），可以方便地接入各种物联网设备。通过这些协议&am…...
【SSM】SpringBoot笔记2：整合Junit、MyBatis
前言： 文章是系列学习笔记第9篇。基于黑马程序员课程完成，是笔者的学习笔记与心得总结，供自己和他人参考。笔记大部分是对黑马视频的归纳，少部分自己的理解，微量ai解释的内容（ai部分会标出）。 …...
STM32——CAN总线
STM32——CAN总线 1. CAN总线基础概念 1.1 CAN总线简介 控制器局域网（Controller Area Network, CAN）是由Bosch公司开发的串行通信协议，专为汽车电子和工业控制设计，具有以下核心特性： 多主控制架构：所有…...
嵌入式面试高频！！！C语言（四）（嵌入式八股文，嵌入式面经）
更多嵌入式面试文章见下面连接，会不断更新哦！！关注一下谢谢！！！！ https://blog.csdn.net/qq_61574541/category_12976911.html?fromshareblogcolumn&sharetypeblogcolumn&…...
数据治理在制造业的实践案例
一、数据治理在制造业的重要性 随着工业4.0的到来，制造业正经历着前所未有的变革。数据治理作为制造业数字化转型的关键组成部分，对提升企业竞争力、优化生产流程、提高产品质量和客户满意度等方面起着至关重要的作用。在制造业中，数据治理不仅涉及到数据的收集、存…...
【强化学习】——03 Model-Free RL之基于价值的强化学习
【强化学习】——03 Model-Free RL之基于价值的强化学习 \quad\quad \quad\quad 动态规划算法是基于模型的算法，要求已知状态转移概率和奖励函数。但很多实际问题中环境 可能是未知的，这就需要不基于模型（Model-Free）的RL方法。 \quad\quad 其又分为： 基于价值（Valu…...
Edge(Bing)自动领积分脚本部署——基于python和Selenium(附源码)
微软的 Microsoft Rewards 计划可以通过 Bing 搜索赚取积分，积分可以兑换礼品卡、游戏等。每天的搜索任务不多，我们可以用脚本自动完成，提高效率，解放双手。 本文将手把手教你如何部署一个自动刷积分脚本，并解释其背…...
html表格转换为markdown
文章目录 工具功能亮点1.核心实现解析1. 剪贴板交互2. HTML检测与提取3. 转换规则设计 2. 完整代码 在日常工作中，我们经常遇到需要将网页表格快速转换为Markdown格式的场景。无论是文档编写、知识整理还是数据迁移，手动转换既耗时又容易出错。本文将介绍…...
VsCode 安装 Cline 插件并使用免费模型(例如 DeepSeek)
当前时间为 25/6/3，Cline 版本为 3.17.8 点击侧边栏的“扩展”图标 在搜索框中输入“Cline” 找到 Cline 插件，然后点击“安装” 安装完成后，Cline 图标会出现在 VS Code 的侧边栏中 点击 Use your own API key API Provider 选择 OpenRouter…...
短视频矩阵系统源码新发布技术方案有那几种？
短视频矩阵运营在平台政策频繁更迭的浪潮中，已成为内容分发的核心战场。行业领先者如筷子科技、云罗抖去推、超级编导等平台，其稳定高效的代发能力背后，离不开前沿技术方案的强力支撑。本文将深入剖析当前主流的六大短视频矩阵系统代发解决方…...
React 第五十二节 Router中 useResolvedPath使用详解和注意事项示例
前言 useResolvedPath 是 React Router v6 提供的一个实用钩子，用于解析给定路径为完整路径对象。 它根据当前路由上下文解析相对路径，生成包含 pathname、search 和 hash 的完整路径对象。 一、useResolvedPath 核心用途 路径解析：将相对…...