数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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 规则的语法：
语法
@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 毫秒）在“可见”和“隐藏”之间切换文本元素的 visibility 属性，从而创建闪烁效果。
<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 毫秒闪烁一次。
559 次查看
