替代 < 眨眼 >

<blink>标签 从来就不是一个官方标准,现在已经被所有的浏览器完全抛弃了。

是否有一种符合标准的方法来使文本闪烁?

211000 次浏览

不,HTML 里没有。开发人员特意删除对元素的支持是有充分理由的,因为这个元素的实现在其他方面已经十多年没有改变了。

也就是说... 你可以使用 使用 CSS 动画模拟它,但是如果我是你,我不会冒着 CSS 动画被砍掉的风险,因为这种方式被滥用了:)

Wikipedia 有一篇很好的文章介绍了这个问题,并提供了一个使用 JavaScript 和 CSS 的替代方案: http://en.wikipedia.org/wiki/Blink_element

浏览器正在放弃 blink元素: Firefox 支持到版本22,Opera 支持到版本12。

HTML5 CR 是第一个提到 blink的规范草案,它声明它是“过时的”,但是(在 渲染部分)用规则描述了它的“预期呈现”

blink { text-decoration: blink; }

并建议使用 CSS 替换元素。在 CSS 和 JavaScript 中实际上有几种模拟 blink的替代方法,但是提到的规则是最直接的一种: 为 text-decoration定义的值 blink是为了提供与 blink元素相对应的 CSS。但是,对它的支持似乎与对 blink元素的支持一样有限。

如果你真的想让内容以跨浏览器的方式闪烁,你可以使用简单的 JavaScript 代码,将内容变成不可见,返回可见等定时方式。为了获得更好的效果,你可以使用 CSS 动画,但是浏览器的支持有限。

如果你想为自己的浏览重新启用眨眼标签,你可以安装我写的这个简单的 Chrome 扩展: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension。它只是使用 setInterval 隐藏并显示每个页面上的所有 < 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

<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>

请尝试这一个,我保证它将工作

  <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>

这里有一些代码可以替代眨眼标记

<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>

下面的解决方案很有趣,因为它可以同时跨多个元素应用,并且当页面上不再存在该元素时不会触发错误。秘密在于,它被称为传递参数的函数,在这个函数中,必须返回希望受到闪烁影响的元素。然后在每次眨眼时调用这个函数。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>

你可以利用 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>

仅使用 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;    }
}

可以用这个

@keyframes blinkingText
{
0%{     opacity: 1;    }
40%{    opacity: 0; }
60%{    opacity: 0; }
100%{   opacity: 1;    }
}


.blinking
{
animation:blinkingText 2s reverse infinite;
}

眨眼标签已经过时了,效果有点过时了:)现在的浏览器不再支持它了。无论如何,如果你需要闪烁效果,你应该使用 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>

来源: HTML 闪烁标记

HTML 代码

<span class="blinking">Am I blinking?</span>

CSS 代码

.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/