怎样利用 CSS 实现一个动态的文字闪烁效果，文字颜色可以周期性变化

前端布洛芬

已于 2025-04-18 20:12:01 修改

阅读量733

点赞数 25

分类专栏：大白话前端八股文章标签： css 前端

于 2025-04-18 19:21:55 首次发布

本文链接：https://blog.csdn.net/qq_37212162/article/details/147339068

版权

大白话前端八股专栏收录该内容

382 篇文章

订阅专栏

大白话怎样利用 CSS 实现一个动态的文字闪烁效果，文字颜色可以周期性变化。

嘿，前端小伙伴们！咱写网页的时候，是不是总想着搞点花活，让页面更吸睛？今天咱就来整点好玩的——用CSS实现一个动态的文字闪烁效果，而且文字颜色还能周期性变化！这效果用在标题、提示语上，瞬间让页面变得超有个性，访客看了都得直呼“哇塞”！话不多说，咱这就开整，先从原理说起！

一、设计原理大揭秘

在CSS里，要实现动态效果，核心就靠@keyframes规则和animation属性。@keyframes就像是一个“动画剧本”，它定义了动画从开始到结束的每个关键帧状态。比如说，文字从完全显示到完全隐藏，再到完全显示，这就是一个简单的闪烁动画过程；而颜色从红色变到蓝色，再变回红色，就是颜色周期性变化的过程。

animation属性则是“导演”，它负责把@keyframes定义好的动画剧本“播放”出来。它可以设置动画的名称、时长、播放次数、速度曲线等等。就好比你在指挥一场演出，决定这场动画怎么演、演多久。

知道了原理，接下来咱就看看具体有哪些实现方法！

二、基础实现方法：简单的闪烁与颜色变化

2.1 HTML结构搭建

首先，我们创建一个简单的HTML文件，搭建好页面结构。在body标签里放一个div，把要闪烁变色的文字放在里面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表，后面我们会创建这个文件 -->
    <title>CSS文字闪烁变色效果</title>
</head>

<body>
    <div class="blinking-text">快来看看我会跳舞的文字！</div>
</body>

</html>

2.2 CSS样式编写

接下来，我们创建styles.css文件，开始写CSS样式。先定义基础样式，让文字居中显示，字体大小、颜色啥的设置好。

/* 选择所有的div元素，设置通用样式 */
div {
    /* 设置文本在元素内水平居中 */
    text-align: center;
    /* 设置字体大小为36像素 */
    font-size: 36px;
    /* 设置字体加粗 */
    font-weight: bold;
    /* 设置文本颜色为黑色 */
    color: black;
}

/* 选择类名为blinking-text的div元素，设置动画相关样式 */
.blinking-text {
    /* 定义动画名称为blink-and-change-color，动画时长为3秒，动画无限循环播放，动画速度曲线为线性 */
    animation: blink-and-change-color 3s infinite linear;
}

然后，我们用@keyframes定义动画的关键帧。这里我们让文字先隐藏（透明度为0），再显示（透明度为1），同时颜色在红色和蓝色之间切换。

/* 定义名为blink-and-change-color的动画关键帧 */
@keyframes blink-and-change-color {
    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        color: red;
    }
    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 0;
        color: blue;
    }
    /* 动画结束时的状态，文字完全显示，颜色为红色 */
    100% {
        opacity: 1;
        color: red;
    }
}

这样，一个基础的文字闪烁且颜色周期性变化的效果就实现啦！打开HTML文件，就能看到文字像在“眨眼睛”，颜色还变来变去。

三、进阶实现方法：更复杂的动画效果

3.1 增加过渡效果

刚刚的效果虽然实现了闪烁和变色，但切换得有点生硬。我们可以加个过渡效果，让变化更丝滑。在blinking-text类里加上transition属性。

/* 选择类名为blinking-text的div元素，设置动画和过渡相关样式 */
.blinking-text {
    /* 定义动画名称为blink-and-change-color，动画时长为3秒，动画无限循环播放，动画速度曲线为线性 */
    animation: blink-and-change-color 3s infinite linear;
    /* 设置过渡属性，让颜色和透明度的变化在0.5秒内完成，过渡效果为线性 */
    transition: color 0.5s linear, opacity 0.5s linear;
}

这样，文字颜色和透明度的变化就会变得平滑很多，不会一下子就切换，视觉效果更舒服。

3.2 多颜色循环变化

我们还可以让文字颜色在更多种颜色之间循环变化。修改@keyframes关键帧，增加更多颜色状态。

/* 定义名为blink-and-change-color的动画关键帧 */
@keyframes blink-and-change-color {
    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        color: red;
    }
    /* 动画进行到25%时的状态，文字完全显示，颜色为橙色 */
    25% {
        opacity: 1;
        color: orange;
    }
    /* 动画进行到50%时的状态，文字完全隐藏，颜色为黄色 */
    50% {
        opacity: 0;
        color: yellow;
    }
    /* 动画进行到75%时的状态，文字完全显示，颜色为绿色 */
    75% {
        opacity: 1;
        color: green;
    }
    /* 动画结束时的状态，文字完全显示，颜色为蓝色 */
    100% {
        opacity: 1;
        color: blue;
    }
}

现在，文字不仅会闪烁，颜色还会在红、橙、黄、绿、蓝之间循环变化，效果更酷炫了！

3.3 改变闪烁频率和节奏

我们可以通过调整animation属性里的时长和速度曲线，来改变文字闪烁的频率和节奏。比如，把动画时长缩短到2秒，让闪烁更快；把速度曲线改成ease-in-out，让动画开始和结束都变慢。

/* 选择类名为blinking-text的div元素，设置动画和过渡相关样式 */
.blinking-text {
    /* 定义动画名称为blink-and-change-color，动画时长为2秒，动画无限循环播放，动画速度曲线为ease-in-out */
    animation: blink-and-change-color 2s infinite ease-in-out;
    /* 设置过渡属性，让颜色和透明度的变化在0.5秒内完成，过渡效果为线性 */
    transition: color 0.5s linear, opacity 0.5s linear;
}

这样，文字闪烁的节奏就变了，看起来又是一种全新的感觉！

四、响应式设计：让效果在不同设备上都完美

在实际项目中，我们的网页要在各种设备上显示，所以还得考虑响应式。我们可以根据屏幕大小，调整文字的字体大小和动画时长，让效果在手机、平板、电脑上都好看。

/* 当屏幕宽度小于600像素时（一般是手机屏幕），应用以下样式 */
@media (max-width: 600px) {
    /* 选择类名为blinking-text的div元素，调整字体大小和动画时长 */
   .blinking-text {
        /* 设置字体大小为24像素 */
        font-size: 24px;
        /* 定义动画名称为blink-and-change-color，动画时长为1.5秒，动画无限循环播放，动画速度曲线为ease-in-out */
        animation: blink-and-change-color 1.5s infinite ease-in-out;
    }
}

这样，在手机上看的时候，文字不会太大，闪烁的速度也更适合小屏幕，用户体验更好。

五、兼容性处理：让更多浏览器支持

虽然现在主流浏览器对CSS动画的支持都还不错，但为了照顾到更多用户，我们还是要做一些兼容性处理。比如，给animation和@keyframes加上浏览器前缀。

/* 选择类名为blinking-text的div元素，设置动画和过渡相关样式，加上浏览器前缀 */
.blinking-text {
    /* 标准语法的动画属性 */
    animation: blink-and-change-color 3s infinite linear;
    /* Safari浏览器的动画属性前缀 */
    -webkit-animation: blink-and-change-color 3s infinite linear;
    /* 设置过渡属性，让颜色和透明度的变化在0.5秒内完成，过渡效果为线性，加上浏览器前缀 */
    transition: color 0.5s linear, opacity 0.5s linear;
    -webkit-transition: color 0.5s linear, opacity 0.5s linear;
}

/* 定义名为blink-and-change-color的动画关键帧，加上浏览器前缀 */
@keyframes blink-and-change-color {
    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        color: red;
    }
    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 0;
        color: blue;
    }
    /* 动画结束时的状态，文字完全显示，颜色为红色 */
    100% {
        opacity: 1;
        color: red;
    }
}
/* Safari浏览器的动画关键帧前缀 */
@-webkit-keyframes blink-and-change-color {
    /* 动画开始时的状态，文字完全显示，颜色为红色 */
    0% {
        opacity: 1;
        color: red;
    }
    /* 动画进行到50%时的状态，文字完全隐藏，颜色为蓝色 */
    50% {
        opacity: 0;
        color: blue;
    }
    /* 动画结束时的状态，文字完全显示，颜色为红色 */
    100% {
        opacity: 1;
        color: red;
    }
}

这样，就算是一些老版本的浏览器，也能尽量正常显示我们的文字闪烁变色效果啦！

那么，在实际开发项目中，如何选择适合自己项目的动态文字闪烁且颜色周期性变化效果

在实际开发项目中，要选择适合自己项目的动态文字闪烁且颜色周期性变化效果，可以从以下几个方面进行考量：

1. 项目整体风格和主题

正式商务风格：如果项目是企业官网、金融类应用等偏正式商务风格的，那么闪烁效果不宜过于夸张，颜色变化也应选择稳重、专业的色彩，如蓝色系、灰色系。可以采用缓慢、柔和的闪烁频率，颜色变化也相对淡雅，避免过于刺眼的颜色组合，以免给用户造成不专业、浮躁的感觉。例如，文字颜色在深蓝色和浅灰色之间缓慢切换，闪烁频率设置为每5 - 8秒一次。
娱乐游戏风格：对于游戏官网、娱乐类APP等项目，风格通常比较活泼、动感，那么可以选择更加夸张、绚丽的闪烁效果和丰富的颜色变化。可以增加闪烁的频率，如每秒闪烁1 - 2次，颜色可以在红、黄、绿、紫等鲜艳的颜色之间快速切换，以吸引用户的注意力，营造出热闹、欢快的氛围。
艺术创意风格：艺术展览、创意工作室等项目追求独特和个性化，闪烁效果和颜色变化可以更加自由、大胆。可以尝试不规则的闪烁节奏，如随机间隔时间闪烁，颜色组合也可以突破常规，使用一些对比强烈或独特的颜色，展现出艺术的创新性和独特性。

2. 用户体验和目标受众

目标受众年龄：如果目标受众是儿童，那么闪烁效果可以更加活泼、色彩鲜艳，因为儿童通常对明亮的颜色和动态效果比较感兴趣。可以使用高饱和度的颜色，如粉色、橙色、浅蓝色等，闪烁频率也可以适当加快。而对于老年用户，过于频繁的闪烁和刺眼的颜色可能会让他们感到不适，因此应该选择较为温和、舒缓的效果，颜色变化也以柔和为主。
用户使用场景：如果项目是在移动设备上使用，用户可能会在各种环境下浏览，如强光下或弱光下。在强光环境下，颜色可以选择对比度较高的组合，闪烁效果也可以稍微明显一些，以确保文字能够清晰可见；而在弱光环境下，过于刺眼的闪烁和颜色可能会伤害用户的眼睛，此时应选择柔和的颜色和较低的闪烁频率。

3. 技术实现难度和兼容性

技术能力和资源：如果团队的前端技术能力有限，或者项目时间紧迫，那么应该选择相对简单的实现方法。例如，使用CSS的@keyframes和animation属性实现基本的闪烁和颜色变化，这种方法代码简单，易于维护。如果团队有较强的技术实力，并且项目对动画效果有较高的要求，可以考虑使用JavaScript来实现更复杂的动画逻辑，如根据用户的交互行为动态调整闪烁频率和颜色。
兼容性要求：不同的浏览器和设备对CSS动画的支持程度可能有所不同。如果项目需要兼容较旧的浏览器，那么在实现效果时需要考虑添加浏览器前缀，或者采用一些兼容性更好的方法。例如，对于一些不支持CSS3动画的旧浏览器，可以使用JavaScript的定时器来模拟闪烁效果。

4. 项目性能和加载速度

动画复杂度：过于复杂的闪烁和颜色变化效果可能会增加页面的加载时间和性能消耗，尤其是在移动设备上。因此，在选择效果时，要权衡动画的复杂度和项目的性能要求。尽量避免使用过多的关键帧和复杂的颜色过渡，以减少页面的渲染负担。
文件大小：如果使用了图片或SVG来实现动态文字效果，要注意控制文件的大小。过大的文件会导致页面加载缓慢，影响用户体验。可以对图片进行压缩处理，或者使用矢量图形来代替位图，以减小文件大小。

5. 内容重点和信息传达

突出重点信息：动态文字闪烁和颜色变化的目的通常是为了突出重点内容。因此，在选择效果时，要确保效果能够有效地吸引用户的注意力，同时不会干扰用户对信息的理解。例如，如果是促销活动的标题，闪烁效果可以强调活动的紧迫性和吸引力，但不能让用户因为闪烁而无法看清标题内容。
信息层级和清晰度：在一个页面中，可能会有多个需要突出显示的元素。要根据信息的层级关系，合理选择不同的闪烁和颜色变化效果，以区分重点和次要信息。例如，主要标题可以使用较为强烈的闪烁和颜色变化，而副标题或提示信息可以使用相对较弱的效果，保持页面的信息清晰度和层次感。

通过综合考虑以上因素，你可以选择出最适合自己项目的动态文字闪烁且颜色周期性变化效果，从而提升项目的视觉效果和用户体验。