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

html文字红色粗体，闪烁渐变动画效果，中英文切换版本

news 来源：原创 2025/6/7 23:24:31

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>