資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
