The <blink> tag从未成为官方标准，现在已被所有浏览器彻底抛弃。
是否有符合标准的方式使文字闪烁？
答案 0 :(得分：64)
.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>
答案 1 :(得分：23)
不，没有。维基百科有一篇很好的文章，并提供了使用JavaScript和CSS的替代方案：http://en.wikipedia.org/wiki/Blink_element
答案 2 :(得分：13)
不，HTML中没有。有一个很好的理由可以让开发人员选择不遗余力地删除对一个元素的支持，该元素的实现在十多年内一直没有被触及。
那说......你可以emulate it using a CSS animation，但如果我是你，我不会因为以这种方式被滥用而导致CSS动画被破坏的风险：）
答案 3 :(得分：4)
浏览器放弃了blink元素：Firefox支持版本22，Opera支持版本12。
HTML5 CR是提及blink的第一个草案规范，将其声明为“过时”，但描述（在Rendering部分）其“预期呈现”规则
blink { text-decoration: blink; }
并建议使用CSS替换该元素。实际上有几种在CSS和JavaScript中模拟blink的替代方法，但提到的规则是最简单的：blink的值text-decoration是专门为了提供CSS副本而定义的blink元素。但是，对它的支持似乎与blink元素一样有限。
如果您真的希望以跨浏览器的方式使内容闪烁，可以使用例如简单的JavaScript代码，以定时的方式将内容更改为不可见，返回可见等。为了获得更好的结果，您可以使用CSS动画，浏览器支持稍微有限。
答案 4 :(得分：4)
请尝试这个，我保证它会起作用
<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>
答案 5 :(得分：1)
如果您要为自己的浏览重新启用blink标记，可以安装我写的这个简单的Chrome扩展程序：https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension。它隐藏并显示所有＆lt; blink＆gt;使用setInterval在每个页面上标记。
答案 6 :(得分：1)
仅使用HTML和CSS闪烁文本
<span class="blinking">I am blinking!!!</span>
现在还有CSS代码
.blinking{
animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
答案 7 :(得分：1)
不推荐使用 blick 标记，并且效果有点陈旧：）当前的浏览器不再支持该标记。无论如何，如果需要闪烁效果，则应使用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>
答案 8 :(得分：0)
一个小的javascript片段来模仿眨眼，甚至不需要css
<span id="lastDateBlinker">
Last Date for Participation : 30th July 2014
</span>
<script type="text/javascript">
function blinkLastDateSpan() {
if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
$("#lastDateBlinker").css("visibility", "visible");
setTimeout(blinkLastDateSpan, 200);
} else {
$("#lastDateBlinker").css("visibility", "hidden");
setTimeout(blinkLastDateSpan, 200);
}
}
blinkLastDateSpan();
</script>
答案 9 :(得分：0)
下面的解决方案很有趣，因为它可以同时应用于多个元素，并且当页面上不再存在该元素时不会触发错误。秘密在于，它被称为传递参数的函数，您必须在其中返回要受到闪烁影响的元素。然后，每次闪烁都会调用此功能。下面的HTML文件：
<!doctype>
<html>
<head>
<style>
.blink {color: red}
</style>
</head>
<body>
<h1>Blink test</h1>
<p>
Brazil elected President <span class="blink">Bolsonaro</span> because he
was the only candidate who did not promise <span class="blink">free things</span>
to the population. Previous politicians created an image that would
bring many benefits, but in the end, the state has been getting more and
more <span class="blink">burdened</span>. Brazil voted for the
realistic idea that <span class="blink">there is no free lunch</span>.
</p>
</body>
<script>
var blink =
{
interval_in_miliseconds:
400,
on:
true,
function_wich_returns_the_elements:
[],
activate:
function(function_wich_returns_the_elements)
{
this.function_wich_returns_the_elements = function_wich_returns_the_elements;
setInterval(blink.change, blink.interval_in_miliseconds);
},
change:
function()
{
blink.on = !blink.on;
var i, elements = [];
for (i in blink.function_wich_returns_the_elements)
{
elements = elements.concat(blink.function_wich_returns_the_elements[i]());
}
for (i in elements)
{
if (elements[i])
{
elements[i].style.opacity = blink.on ? 1 : .2;
}
}
}
};
blink.activate
(
[
function()
{
var
i,
node_collection = document.getElementsByClassName('blink'),
elements = [];
for (i = 0; i < node_collection.length; i++)
{
elements.push(node_collection[i]);
}
return elements;
}
]
);
</script>
</html>
答案 10 :(得分：0)
您可以利用JavaScript的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>
答案 11 :(得分：0)
可以使用此
.as-console-wrapper { max-height: 100% !important; top: 0; }答案 12 :(得分：-1)
这里有一些代替blink标签的代码
<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
setTimeout(whiteFunc,blacktime);
}
</script>
答案 13 :(得分：-1)
以下是符合您需求的网络组件：blink-element。
您只需将内容包装在<blink-element>。
<blink-element>
<!-- Blinking content goes here -->
</blink-element>