极客笔记blink标记的替代方法
HTML中的 < blink>标记用于在文本上创建闪烁效果。此标记中的文本会以默认速率闪烁。这个标记的主要目的是能够吸引用户的注意力。然而，这个标记在HTML 4.0版本中已经被弃用，并且在现代浏览器中不再支持。
相反，我们可以使用 CSS 动画或 JavaScript 作为<blink>标记的替代方法。
语法
下面是HTML <blink>标记的语法：
<blink> The text to 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规则的语法-
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
示例
在下面的示例中，我们使用CSS来执行闪烁操作，作为使用已弃用的<blink>标签的替代方法。在这里，我们使用CSS的“@Keyframes”规则来获得闪烁的动画效果，即将目标文本的不透明度从1变为0，然后再从0变为1，持续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毫秒闪烁一次。
