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. 效果
