闪烁标签的替代方案

htmlweb developmentfront end technology更新于 2025/2/16 7:08:17

HTML <blink> 标签用于在文本上创建闪烁效果。此标签内的文本将以默认频率闪烁。此标签的主要目的是吸引用户的注意力。但是，此标签已不再受支持，在 HTML 4.0 版本中已被弃用，并且现代浏览器也不再支持它。

我们可以使用 CSS 动画或 JavaScript 来替代"<blink>"标签。

语法

以下是 HTML <blink> 标签的语法 -

<blink> 要闪烁的文本。</blink>

示例

在下面的示例中，我们使用 HTML <blink> 标签使文本闪烁。

<html>
<head>
   <title>Alternative for " <blink>" tag </title>
</head>
<body>
   <h3 style="text-align:center">The <span style="color:red">blink</span> tag is no longer supported in HTML5. </h3>
   <p style="text-align:center">
      <blink> Welcome to tutorialspoint </blink>
   </p>
</body>
</html>

正如我们在输出中看到的，文本没有闪烁，因为 HTML <blink> 标签已被弃用，在现代浏览器中无法使用。但是，我们仍然可以使用 CSS 和 JavaScript 执行此操作。

CSS @Keyframes

CSS @Keyframes 规则用于基于一组 CSS 属性值创建动画序列。该集合指定动画的各个阶段(从 0% 到 100%)，其中 0% 表示动画开始，100% 表示动画完成。

我们可以更改在动画过程中各个点应应用的 CSS 属性和值。使用此规则，我们可以为 HTML 文本元素实现闪烁动画。

以下是 CSS @keyframes 规则的语法 -

语法

@keyframes animationname {keyframes-selector {css-styles;}}

示例

在下面的示例中，我们使用 CSS 执行闪烁操作，而不是使用已弃用的 <blink> 标签。在这里，我们使用 CSS "@Keyframes" 规则来获取闪烁动画或效果，该动画或效果在 1 秒内将目标文本的不透明度从 1 更改为 0，然后再更改回 1。

<html>
<head>
   <title>Alternative for " <blink>" tag </title>
   <style>
      @keyframes blink {
         0% {
            opacity: 1;
         }
         50% {
            opacity: 0;
         }
         100% {
            opacity: 1;
         }
      }
      #blinking-text {
         animation: blink 1s infinite;
      }
      h3 {
         text-align: center;
      }
      p {
         text-align: center;
      }
      span {
         color: red;
      }
   </style>
</head>
<body>
   <h3>Here we are performing the <span>blink</span> operation using the CSS. </h3>
   <p id="blinking-text">Welcome to tutorialspoint</p>
</body>
</html>

正如我们在窗口中看到的，文本元素正在无限闪烁。

JavaScript SetInterval() 方法

在 JavaScript 中，setInterval() 方法用于重复调用特定函数，每次调用之间都有固定的时间延迟。此方法在各种场景中都很有用，例如创建动画、更新数据或自动刷新网页。

以下是 setInterval() 方法的语法 -

setInterval(function, milliseconds, param1, param2, ...)

示例

在下面的示例中，我们使用 JavaScript 以指定的间隔(使用 setInterval() 方法，间隔 400 毫秒)在"可见"和"隐藏"之间切换文本元素的可见性属性，从而创建闪烁效果。

<html>
<head>
   <title>Alternative for " <blink>" tag </title>
   <style>
      #blinking-text {
         visibility: hidden;
      }
      h3 {
         text-align: center;
      }
      p {
         text-align: center;
      }
      span {
         color: red;
      }
   </style>
</head>
<body>
   <h3>Here we are performing the <span>blink</span> operation using the JavaScript. </h3>
   <p id="blinking-text">Welcome to tutorialspoint</p>
   <script>
      const blinkingText = document.getElementById('blinking-text');
      setInterval(function() {
         blinkingText.style.visibility = (blinkingText.style.visibility == 'hidden') ? 'visible' : 'hidden';
      }, 400);
   </script>
</body>
</html>

正如我们在窗口中看到的，文本元素每 400 毫秒闪烁一次。