Appearance
闪烁效果
Simulates a broken or dying neon sign with rapid, irregular opacity changes using carefully crafted keyframes that mimic random flicker patterns.
实时预览
Open 24/7
代码
css
.flicker {
font-size: 42px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #ff6b35,
0 0 82px #ff6b35,
0 0 92px #ff6b35;
animation: flicker 3s linear infinite;
}
@keyframes flicker {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 1;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #ff6b35,
0 0 82px #ff6b35,
0 0 92px #ff6b35;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow:
0 0 2px #fff,
0 0 5px #fff,
0 0 10px #ff6b35,
0 0 20px #ff6b35;
}
}html
<span class="flicker">Open 24/7</span>纯 CSS 实现的闪烁效果文字动画效果——通过渐变、阴影、滤镜和变换等 CSS 属性让文字产生视觉动效。所有文字内容保持可选中、可复制、对搜索引擎完全可见。
快速使用
- 复制 CSS 代码到你的样式文件中
- 在 HTML 中放入对应的文字结构（注意逐字效果需要每个字符包裹
<span>） - 根据你的文字内容调整
animation-delay和文字数量 - 修改颜色和字号以匹配你的品牌风格
使用场景
- 页面主标题：用渐变文字、霓虹发光或逐字弹跳效果吸引用户注意力
- 品牌名称/Logo：3D 文字或故障效果传递技术与设计感
- 营销活动页：彩虹文字、闪烁效果营造促销紧迫感
- 技术博客/文档：打字机效果展示代码片段或技术标语
常见问题
Q: 文字动画在哪些浏览器下兼容？ A: 大部分效果所有现代浏览器都支持。需注意：background-clip: text 需 -webkit- 前缀；@property 仅 Chrome/Edge 支持。渐变文字和霓虹发光效果建议加降级方案。
Q: 动画文字会影响 SEO 吗？ A: 不会。文字内容仍然在 HTML 中正常渲染，搜索引擎能完整抓取。CSS 动画只影响视觉呈现，不改变 DOM 结构和文本可访问性。
Q: 如何让逐字动画适配任意长度的文字？ A: 用 JavaScript 动态给每个字符包裹 <span> 并设置 animation-delay: calc(var(--i) * 0.05s)，或使用 CSS animation-delay 配合 nth-child 错位。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持（含 @property） |
| Firefox | ✅ 基本支持（不含 @property） |
| Safari | ✅ 基本支持（需 -webkit-background-clip） |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ❌ 渐变文字等高级效果不支持 |
使用说明
| 属性 | 说明 |
|---|---|
| Keyframe ranges | Narrow percentage ranges (e.g. 19.999%–22%) create sharp on/off flicker |
opacity jumps | Alternates between 1 (full) and 0.4 (dim) for that dying-light look |
text-shadow (dim state) | Reduced shadow layers and smaller spread during flicker moments |
animation: linear | Keeps timing consistent without easing curves |
Tip: Adjust the percentage ranges to change flicker frequency. More range pairs = more flickers. Use steps(1) for a hard on/off without gradual transitions.