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

html文字红色粗体，闪烁渐变动画效果

news 来源：原创 2025/6/6 8:38:51

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: #f5f7fa;min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.container {max-width: 800px;width: 100%;background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;}header {background: linear-gradient(135deg, #ff5252, #b33939);color: white;padding: 25px 30px;text-align: center;}h1 {font-size: 2.2rem;margin-bottom: 10px;}.subtitle {font-size: 1.1rem;opacity: 0.9;}/* 闪烁动画 */@keyframes blink {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }}.blink-text {animation: blink 1.2s infinite;color: #ff0000;font-weight: bold;}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th {background: #4a69bd;color: white;padding: 16px 15px;text-align: left;font-weight: 600;}td {padding: 14px 15px;border-bottom: 1px solid #eef1f5;color: #333;}tr:nth-child(even) {background-color: #f8f9fc;}tr:hover td {background-color: #edf2ff;}.status-cell {font-weight: bold;}.explanation {padding: 25px;background: #f0f4ff;border-top: 1px solid #e0e6ff;}.explanation h3 {color: #4a69bd;margin-bottom: 15px;font-size: 1.3rem;}.code {background: #2d3748;color: #e2e8f0;padding: 15px;border-radius: 6px;margin-top: 15px;font-family: 'Courier New', monospace;font-size: 0.95rem;overflow-x: auto;}footer {text-align: center;padding: 20px;color: #666;font-size: 0.9rem;}</style>
</head>
<body><div class="container"><header><h1>红色粗体闪烁文字表格</h1><p class="subtitle">状态列中的文字具有红色、粗体和闪烁效果</p></header><table><thead><tr><th>ID</th><th>任务</th><th>负责人</th><th>截止日期</th><th>状态</th></tr></thead><tbody><tr><td>T001</td><td>网站首页设计</td><td>张三</td><td>2023-12-15</td><td class="status-cell blink-text">紧急</td></tr><tr><td>T002</td><td>数据库优化</td><td>李四</td><td>2023-12-10</td><td class="status-cell">正常</td></tr><tr><td>T003</td><td>用户注册功能</td><td>王五</td><td>2023-12-05</td><td class="status-cell blink-text">超期</td></tr><tr><td>T004</td><td>服务器维护</td><td>赵六</td><td>2023-12-20</td><td class="status-cell">进行中</td></tr><tr><td>T005</td><td>支付接口集成</td><td>钱七</td><td>2023-12-12</td><td class="status-cell blink-text">高风险</td></tr></tbody></table><div class="explanation"><h3>实现说明</h3><p>状态列中带有红色粗体并闪烁的文字是通过以下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;">在表格单元格中添加 <code>class="blink-text"</code> 即可实现此效果。</p></div><footer><p>HTML表格红色粗体闪烁文字示例</p></footer></div>
</body>
</html>

2. 最少代码

/* 闪烁动画 */
@keyframes blink {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }
}
.blink-text {animation: blink 1.2s infinite;color: #ff0000;font-weight: bold;
}
<td class="status-cell blink-text">高风险</td>