效果
完整代
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .neon-pulse { margin:50px 0 0 50px; font-size: 48px; font-weight: bold; color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; animation: neon-flicker 1.5s infinite alternate; } @keyframes neon-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; } 20%, 24%, 55% { text-shadow: none; } } </style> </head> <body> <div class="neon-pulse">HELLO</div> </body> </html>
- CSS 样式:
- 设置了基本的样式，如字体大小、字体加粗和颜色。
- 使用
text-shadow属性创建多层阴影效果，模拟霓虹灯的发光效果。 - 通过
animation属性应用名为neon-flicker的动画，使文本产生闪烁效果。
- 关键帧动画:
- 定义了多个关键帧，通过改变
text-shadow的值来模拟文本的闪烁效果。 - 在某些关键帧中，文本的阴影消失，模拟闪烁中断的效果。
- 整体效果:
- 通过上述设置，最终实现了类似霓虹灯的闪烁文字动画效果。
