Html <blink> 的替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18105152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative for <blink>
提问by stommestack
The <blink>tagwas never an official standard, and is now completely abandoned by all browsers.
该<blink>标签从未成为官方标准，现在已被所有浏览器完全抛弃。
Is there a standards compliant way of making text blink?
是否有符合标准的使文本闪烁的方法？
采纳答案by Christophe Herreman
No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element
不，那里没有。维基百科有一篇关于此的不错的文章，并提供了使用 JavaScript 和 CSS 的替代方法：http: //en.wikipedia.org/wiki/Blink_element
回答by Elangovan
.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>回答by BoltClock
No, there isn't in HTML. There is a good reason why the developers chose to go out of their way to remove support for an element whose implementation was otherwise untouched for upwards of a decade.
不，HTML 中没有。开发人员选择不遗余力地取消对一个元素的支持是有充分理由的，该元素的实现在其他方面超过十年都没有受到影响。
That said... you could emulate it using a CSS animation, but if I were you, I wouldn't risk CSS animations being axed due to being abused in this manner :)
回答by Jukka K. Korpela
The blinkelement is being abandoned by browsers: Firefox supported it up to version 22, and Opera up to version 12.
该blink元素正在被浏览器放弃：Firefox 支持它到 22 版，Opera 支持到 12 版。
The HTML5 CR, which is the first draft specification that mentions blink, declares it as “obsolete” but describes (in the Renderingsection) its “expected rendering” with the rule
HTML5 CR 是第一个提到 的规范草案blink，将其声明为“已过时”，但（在渲染部分）使用规则描述了其“预期渲染”
blink { text-decoration: blink; }
and recommends that the element be replaced by the use of CSS. There are actually several alternative ways of emulating blinkin CSS and JavaScript, but the rule mentioned is the most straightforward one: the value blinkfor text-decorationwas defined specifically to provide a CSS counterpart to the blinkelement. However, support to it seems to be as limited as for the blinkelement.
并建议使用 CSS 替换该元素。实际上，blink在 CSS 和 JavaScript中模拟有多种替代方法，但所提到的规则是最直接的一种：专门定义blinkfor的值text-decoration以提供与blink元素对应的 CSS 。但是，对它的支持似乎与blink元素一样有限。
If you really want to make content blink in a cross-browser way, you can use e.g. simple JavaScript code that changes content to invisible, back to visible etc. in a timed manner. For better results you could use CSS animations, with somewhat more limited browser support.
如果您真的想让内容以跨浏览器的方式闪烁，您可以使用例如简单的 JavaScript 代码，以定时方式将内容更改为不可见、恢复为可见等。为了获得更好的结果，您可以使用 CSS 动画，但浏览器支持有限。
回答by Reu Roo
Please try this one and I guarantee that it will work
请试试这个，我保证它会起作用
<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;
Then put this below:
然后把这个放在下面：
<blink><center> Your text here </blink></div>
回答by Faridul Khan
Blinking text with HTML and CSS only
仅使用 HTML 和 CSS 闪烁文本
<span class="blinking">I am blinking!!!</span>
And Now CSS code
现在 CSS 代码
.blinking{
animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
回答by Vazgen Manukyan
The blicktag is deprecated, and the effect is kind of old :) Current browsers don't support it anymore. Anyway, if you need the blinking effect, you should use javascript or CSS solutions.
该布利克标签已被弃用，效果是怎么样的老:)当前的浏览器不支持它了。无论如何，如果您需要闪烁效果，您应该使用 javascript 或 CSS 解决方案。
CSS Solution
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
来源：HTML 闪烁标签
回答by etlovett
If you're looking to re-enable the blink tag for your own browsing, you can install this simple Chrome extension I wrote: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. It just hides and shows all <blink> tags on every page using setInterval.
如果您想为自己的浏览重新启用闪烁标签，您可以安装我写的这个简单的 Chrome 扩展程序：https: //github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension。它只是使用 setInterval 在每个页面上隐藏和显示所有 <blink> 标签。
回答by Raaghu
A small javascript snippet to mimic the blink , no need of css even
一个模拟眨眼的小 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>
回答by Ali Bagheri
can use this
可以用这个
@keyframes blinkingText
{
0%{ opacity: 1; }
40%{ opacity: 0; }
60%{ opacity: 0; }
100%{ opacity: 1; }
}
.blinking
{
animation:blinkingText 2s reverse infinite;
}
