使用CSS实现文字的荧光闪烁效果【CSS基础入门100例】
关注IT技术视界公众号，获取好玩有趣软件！
先领1T空间！再存有趣资源！仅有一次机会！
在网页中，我们可以使用 CSS3 动画 来实现文字的荧光闪烁效果，使其呈现出类似 霓虹灯 的发光感。以下是完整的 HTML 代码，并附有代码展示区域，方便复制和使用。
效果展示
下面是文字的荧光闪烁效果，鼠标悬停不会影响动画，它会持续循环变亮变暗。
完整代码
下面是实现该效果的完整 HTML + CSS 代码，你可以复制并粘贴到你的项目中使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现文字的荧光闪烁效果</title>
<style type="text/css">
div {
text-align: center;
}
.a {
color: #0000FF; /* 文字颜色 */
text-decoration: none;
font-size: 5em; /* 字体大小 */
font-family: "微软雅黑"; /* 字体 */
-webkit-animation: shine 2.4s infinite; /* 文字发光动画 */
}
@-webkit-keyframes shine {
0%, 100% {
color: #fff;
text-shadow: 0 0 10px #0000FF, 0 0 10px #0000FF;
}
50% {
text-shadow: 0 0 10px #0000FF, 0 0 40px #0000FF;
}
}
</style>
</head>
<body>
<div>
<a href="javascript:void(0);" class="a">陪你看日出</a>
</div>
</body>
</html>代码解析
-
HTML 结构
- 使用
<div>容器包裹<a>链接，保证居中显示。 - 文字链接
class="a"绑定了 CSS 样式，实现荧光闪烁效果。
- 使用
-
CSS 动画
text-shadow: 通过 蓝色光晕 制造出荧光效果。@-webkit-keyframes shine:- 0% 和 100%: 文字白色，带小范围蓝色光晕。
- 50%: 光晕变强，形成明亮的荧光闪烁。
-
动画效果
-webkit-animation: shine 2.4s infinite;让动画 无限循环 运行。
结语
这种 荧光文字 效果可以用于 夜景风格网页，或者 霓虹灯牌 的 UI 设计。通过简单的 CSS3 动画，就能创造出独特的视觉体验。
你可以自由调整 颜色、字体、动画时间 以适应不同的设计需求，试试看吧！ 🚀🚀
THE END