使用 CSS 和 JavaScript 制作文本闪烁

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 和 JavaScript 制作文本闪烁

作者：迹忆客最近更新：2023/04/27 浏览次数：

本文将深入探讨闪烁/闪光文本。我们将看到它的目的和优势。

我们将学习许多策略和技术来在我们的网站上实现闪烁文本。为了实现闪烁文本，我们将探索内部 CSS、内联 CSS、外部 CSS、JavaScript 和 jQuery。

HTML 中的闪烁文本

闪烁文本是闪烁的文本类型。在购物网站上，您可能会看到闪烁的促销图标或闪烁样式的新系列横幅。

这是吸引用户注意力的有效策略。 HTML 为这个功能提供了标签 <blink> ；然而，浏览器不再支持它，使它成为一个弃用的标签。

让我们研究一下在不使用标签的情况下实现此功能的各种方法。

使用内部或嵌入式 CSS 制作文本闪烁

内部 CSS 包含在 HTML 样式标签中。在标签中，我们可以包含任何 CSS 属性。

查看下面的代码，了解我们如何使用内部 CSS 来创建闪烁的文本。

<html>
    <head>
        <style>
            .blink {
                animation: blinker 1s linear infinite;
            }

            @keyframes blinker
            {
              50% {
                  opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Internal CSS Blink !</div>
    </body>
</html>

这是使文本闪烁的最直接的方法之一。我们只是做了一点造型，工作就完成了。

一些 CSS 术语对你来说可能是新的，但不要担心，让我们详细了解每个术语的含义。

animation 属性

我们在类 blink 上使用 CSS 的动画属性来应用动画。动画属性是以下内容的简写：

a	b
animation-name	指定动画名称。
animation-duration	它定义了动画完成一个周期需要多长时间。
animation-timing-function	指定动画从开始到结束的速度曲线。
animation-delay	指定等待动画开始的时间。
animation-iteration-count	指定动画应播放的次数。
animation-direction	指定动画的方向，即向前、向后或交替来回。
animation-fill-mode	指示 CSS 动画在执行前后如何将样式应用于其目标。
animation-play-state	指定动画是运行还是暂停。

现在，让我们了解一下我们在代码中写了什么。上面代码中的动画具有以下属性：

blinker 是一个动画名称。
1s是animation-duration，意思是每个循环将在1秒后完成。
linear是animation-timing-function，意思是动画从头到尾都以同样的速度播放。
infinite是animation-iteration-count，意思是动画会无限次播放。

总结整个信息，我们得出结论，动画信号灯会在一秒内以相同的速度运行每个循环，无数次。

keyframes

在 CSS 中，@keyframes 定义动画规则。可更改的 CSS 样式用于创建动画。

动画期间可能会发生多个 CSS 属性更改。我们必须确定何时发生样式变化以百分比表示或包含短语 from 和 to，相当于 0% 和 100%； 0% 表示开始，100% 表示完成。

为了获得最好的浏览器支持，请始终指定 0% 和 100% 选择器。我们将在本文后面看到它。

keyframes的 CSS 语法是：

@keyframes animation-name {*keyframes-selector* {*css-styles;}*}

让我们看看我们在代码中做了什么。

我们将关键帧放在我们的动画闪烁器上，并指定在 50% 时，它的不透明度应该为零。元素的透明度是通过 opacity 属性设置的。

不透明度属性的值必须严格介于 0 到 1 之间。

CSS Vendor 前缀

添加到 CSS 属性的唯一前缀称为供应商前缀。有几个 CSS 属性是旧浏览器版本不支持的，因此您必须使用浏览器前缀来帮助这些标签。

每个渲染引擎都有一个前缀，只会将属性应用于该特定浏览器。

Internet Explorer、Microsoft Edge：-ms-
Chrome、Safari、iOS、安卓：-webkit-
火狐浏览器：-moz-
Opera：-o-

让我们重写上述代码以适用于尽可能多的浏览器。

<html>
    <head>
        <style>
            .blink {
                -webkit-animation: blinker 1s linear infinite;
                -moz-animation: blinker 1s linear infinite;
                -ms-animation: blinker 1s linear infinite;
                -o-animation: blinker 1s linear infinite;
                 animation: blinker 1s linear infinite;
            }

            @-webkit-keyframes 'blinker' {

                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-moz-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-o-keyframes 'blinker' {
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-ms-keyframes 'blinker' {
               0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes 'blinker' {

             0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

使用内联 CSS 制作文本闪烁

内联 CSS 允许您将样式直接放入 HTML 元素中。虽然很高兴知道内联 CSS 不是一个值得推荐的选项，因为它依赖于元素，所以它不可重用。

此外，我们不能在内联样式中使用 CSS 的所有属性和功能。说到我们当前的闪烁文本场景，我们不能在内联 CSS 中使用关键帧，因为关键帧不是 HTML 元素的一部分。

让我们看看如何使用内联 CSS 来闪烁文本。

<html>
    <head>
        <style>
            @-webkit-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }

            @-moz-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-o-keyframes 'blinker' {
                 50% {
                    opacity: 0;
                }
            }

            @-ms-keyframes 'blinker' {
                50% {
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="blink" style="animation: blinker 1s linear infinite">
            In-line CSS Blink !
        </div>
    </body>
</html>

使用外部 CSS 制作文本闪烁

外部 CSS 是将 CSS 文件添加到我们的 HTML 文件的方式。将样式和元素分开是一种很好的做法。

您可以使用链接标记添加 CSS 文件。创建一个名为 style.css 的 CSS 文件，复制上面代码中 style 标签中的代码，并将其添加到 HTML 文件中。就是这样。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="blink">Hello Blinking World!</div>
    </body>
</html>

使用 JavaScript 制作文本闪烁

在执行几乎所有功能时，JavaScript 一直是救星。它提供了各种方法和技术来非常快速地完成令人惊奇的事情。

让我们看看如何使用 JavaScript 使文本闪烁。

<html>
    <head>
        <script>
            var blink_speed = 300;
            setInterval(function(){
                var element = document.getElementById("blink");
                element.style.display = element.style.display == 'none'?'':'none';
            }, blink_speed);
        </script>
    </head>
    <body>
        <div id="blink">Javascript Blink !</div>
    </body>
</html>

让我们在这里了解 JavaScript 代码。它在做什么魔术？

首先，我们初始化一个名为 blink_speed 的变量并赋值；您可以设置您选择的任何值。如果给1000分就是1秒，2000分就是2秒，以此类推。

我们在代码中分配了 300，这意味着它会少于 1 秒。

其次，我们使用JavaScript的setInterval函数。 setInterval 方法以指定的时间间隔（以毫秒为单位）继续调用该函数。

这是该函数的语法：

setInterval(function, milliseconds)

函数参数是按照指定的时间间隔重复执行的指令。毫秒参数接收执行间隔的速度。

在我们的代码中，setInterval 的函数参数首先通过Id 名称获取元素。获取所需元素后，我们使用三元运算符检查，如果我们的元素显示为无，则显示它，反之亦然。

然后我们将 blink_speed 分配给 setInterval 函数的第二个参数。

使用 JQuery 制作文本闪烁

jQuery 是一个 JavaScript 库，其目的是使 JavaScript 尽可能简单。让我们看看如何使用 jQuery 制作闪烁的文本。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            function blinkText(element){
              $(element).fadeOut('slow', function(){
                  $(this).fadeIn('slow', function(){
                      blinkText(this);
                  });
              });
            }
            $(function() {
                blinkText('#blink');
            });
        </script>
    </head>
    <body>
        <div id="blink">JQuery Blink !</div>
    </body>
</html>

这很简单。让我们看看代码在做什么。

由于 jQuery 是一个 JavaScript 库，我们需要在代码中添加它的引用才能使用它。在代码中，我们创建了一个简单的函数 blinkText，它接收一个 HTML 元素。

首先，我们在元素上调用 fadeOut 函数，然后在这个函数内，我们在它上面调用另一个函数 fadeIn。在 fadeIn 内部，我们递归调用我们的函数，因为我们希望它无限次地显示闪烁的文本。

总之，文本会淡出、淡入、淡出、淡入等等，因为它是一个永无止境的递归调用。

使用 JavaScript 在页面的多个部分制作闪烁文本

让我们做一个令人兴奋的任务。我们想在页面的多个区域制作闪烁的文本。

使用 CSS 很简单。将相同的类分配给所有要闪烁的元素，它就会完成。

但是如何用 JavaScript 做到这一点呢？正如我们在上面的代码中看到的，JavaScript 只选择一个元素。

让我们看看如何实现这一目标。

<html>
    <head>
        <script>
            function blinkText()
            {
                var elements = document.getElementsByClassName("blink");
                for(var i = 0, l = elements.length; i < l; i++)
                {
                    var blink = elements[i];
                    blink.style.display = blink.style.display == 'none' ? '' : 'none';
                }
            }
            setInterval(blinkText, 300);
        </script>
    </head>
    <body>
        <div class="blink">Hello</div>
        <div class="blink">World</div>
    </body>
</html>

如果我们有许多具有相同类名的元素，document.getElementByClassname 将返回所有元素的数组。然后我们一个一个地遍历每个元素并完成任务。

使用 CSS 制作替代闪烁文本

现在，让我们创建另一个奇妙的动画，仅使用 CSS 制作一个替代单词闪烁的文本。

<html>
    <head>
        <style>
            .blink::before {
                content: "Welcome";
                animation: blinker 1s linear infinite alternate;
            }

            @keyframes blinker {
              0% {
                content: "Welcome";
              }
              50% {
                opacity: 0%;
              }
              100% {
                content: "Developer";
              }
            }
        </style>
    </head>
    <body>
        <div class="blink"></div>
    </body>
</html>

它最初会显示 Welcome，然后闪烁，然后说 Developer。这个循环不断重复。

上一篇：CSS 防止文本选择

下一篇：使用 CSS 向上移动文本

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 Bootstrap CSS

发布时间：2023/04/28 浏览次数：59 分类：CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间：2023/04/28 浏览次数：107 分类：CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：123 分类：CSS

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间：2023/04/28 浏览次数：73 分类：CSS

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间：2023/04/28 浏览次数：108 分类：CSS

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间：2023/04/28 浏览次数：98 分类：CSS

在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 CSS 向上移动文本

发布时间：2023/04/28 浏览次数：153 分类：CSS

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

CSS 防止文本选择

发布时间：2023/04/28 浏览次数：75 分类：CSS

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 Web 浏览器使用该属性。

CSS 使用浮动居中元素

发布时间：2023/04/28 浏览次数：190 分类：CSS

本文主要讨论如何使用CSS实现浮动元素居中。 float 属性通常设置为左值或右值，而不是中心值。本文将讨论浮动元素如何居中的几个技巧

迹忆客专注技术分享