使用CSS实现文字闪烁效果【CSS基础入门100例】
网页设计中，文字闪烁效果 可以用来吸引用户的注意力，让重要的内容更加突出。今天，我们将展示如何通过 CSS动画 实现文字的闪烁效果，帮助提升网页的互动性和动态感。
🎨 效果展示
下方展示了使用 CSS 创建的 文字闪烁效果，文字颜色为紫色，在页面中以闪烁的方式显示，效果独特。
天生我材必有用
📌 完整代码
以下是完整的 HTML 和 CSS 代码，你可以复制并粘贴到你的 HTML 文件中查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>实现文字的闪烁效果</title>
<style>
body {
background: #000000; /* 设置页面背景颜色 */
text-align: center; /* 设置文字居中 */
}
.flicker {
color: #9966FF; /* 设置文字颜色 */
font-size: 64px; /* 设置字体大小 */
font-weight: bolder; /* 设置字体粗细 */
-webkit-animation: flicker 2s infinite; /* 设置动画 */
}
@-webkit-keyframes flicker {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1 class="flicker">天生我材必有用</h1>
</body>
</html>📖 代码解析
| 属性 | 描述 |
|---|---|
background: #000000; | 设置网页背景为黑色，使文字更加突出。 |
color: #9966FF; | 设置文字颜色为紫色。 |
font-size: 64px; | 设置文字的字体大小为 64px。 |
font-weight: bolder; | 设置文字为加粗效果。 |
-webkit-animation: flicker 2s infinite; | 设置动画 flicker，持续时间为 2秒，动画无限循环。 |
@-webkit-keyframes flicker | 定义动画的关键帧，在 0% 和 100% 时文字完全可见，在 50% 时文字透明度为 0.5，产生闪烁效果。 |
📌 代码解析
@-webkit-keyframes flicker- 该 CSS 动画通过设置 关键帧 来控制文字的透明度变化。
0%和100%时，文字的透明度为 1（完全可见），而在50%时，透明度降低到 0.5（文字变淡，呈现闪烁效果）。-webkit-animation是应用该动画的 CSS 属性，其中2s是每次动画持续的时间，infinite表示动画会无限循环。
文字样式
color设置了文字的颜色为紫色 (#9966FF)，使文字在页面上显得更加醒目。font-size控制文字的大小，而font-weight使文字变粗，增强视觉效果。
🚀 结语
通过 CSS动画，我们成功实现了一个 文字闪烁效果，为页面内容添加了一些动态效果。此效果非常适用于强调重要信息、吸引用户注意，或者让网页设计更具互动感。希望你能通过这种方法，创造出更加生动的网页！
THE END