闪烁标签<blink>
从未成为正式的标准,在现代浏览器中已被完全弃用。
有没有符合标准的方法让文本闪烁?
.blink_text
{
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
color: red;
}
@-moz-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<span class="blink_text">India's Largest portal</span>
没有。维基百科有一篇关于这个问题的好文章,并提供了使用JavaScript和CSS的替代方法:http://en.wikipedia.org/wiki/Blink_element
不,HTML中没有这个元素。开发人员之所以费尽心思删除一个实现时间长达十年的元素,是有充分的理由的。
话虽如此……您可以使用CSS动画模拟它, 但如果我是您,我不会冒险滥用CSS动画而导致其被禁止 :)
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
然后将以下内容放在下方:
<blink><center> Your text here </blink></div>
getElementsByTagName
查询 blinks
标签。实际上,您只需查询一次,因为它会自动更新(简而言之:在循环外声明该变量一次即可)。2)函数 > 超时 > 函数 > 超时 > ... 它非常深入,一个简单的 setInterval
应该就可以了。(附注:使用反向 for 循环是个好主意)给你点赞,因为这段恶魔代码值得。 - Sabazblink
"元素已经被浏览器放弃:Firefox支持到22版本,Opera支持到12版本。blink
"的草案规范,它将其声明为“过时”,但在Rendering部分描述了其“预期呈现”的规则。请注意保留HTML标记。blink { text-decoration: blink; }
blink
的替代方法,但是提到的规则是最简单的:为了提供与blink
元素的CSS对应项,定义了text-decoration
的值blink
。然而,它的支持似乎像blink
元素一样有限。blink
标签存在的方式。该示例确实是一个动画 GIF ;) - jobukkitblink 标签已经被弃用,其效果已经有些老旧。当前的浏览器不再支持它。无论如何,如果你需要闪烁的效果,你应该使用 JavaScript 或 CSS 解决方案。
CSS 解决方案
blink {
animation: blinker 0.6s linear infinite;
color: #1c87c9;
}
@keyframes blinker {
50% { opacity: 0; }
}
.blink-one {
animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {
0% { opacity: 0; }
}
.blink-two {
animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>
<blink>Blinking text</blink>
</h3>
<span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
<p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
</body>
</html>
sourse: HTML blink Tag
setInterval
函数:
const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);
<span id="spanEl">This text will blink!</span>
只使用HTML和CSS实现文本闪烁
<span class="blinking">I am blinking!!!</span>
.blinking{
animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
HTML 代码
<span class="blinking">Am I blinking?</span>
.blinking{
animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: #000; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
<span class="blinking">Am I blinking?</span>
Ref:https://html-online.com/articles/blinking-text-css-animation/
<blink>
最初是作为一个玩笑而构思出来的。请参见此处:montulli.org。 - David R Tribble