Html 如何让网站上的文字闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20270096/
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
How to make text blink on website?
提问by Commodent
I am making a website and I want a hyperlink on the page to blink. It doens't matter how fast it does, only not too slow. It would also be cool if I could make it blink in different colors.
我正在制作一个网站，我希望页面上的超链接闪烁。它的速度有多快并不重要，只是不要太慢。如果我能让它以不同的颜色闪烁也很酷。
I have tried using text-decoration:blink; in css, but that didn't work.
我试过使用 text-decoration:blink; 在 css 中，但这不起作用。
I've added this to the css-file, but now what?:
我已将此添加到 css 文件中，但现在怎么办？：
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1s;
}
Doesn't seem to work
似乎不起作用
回答by pstenstrm
You can do this pretty easily with CSS animations.
您可以使用 CSS 动画轻松完成此操作。
a {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
You can also extend it to change colors. With something like:
您还可以扩展它以更改颜色。像这样：
@keyframes blink {
0% {
opacity: 1;
color: pink;
}
25% {
color: green;
opacity: 0;
}
50% {
opacity: 1;
color: blue;
}
75% {
opacity: 0;
color: orange;
}
100% {
opacity: 1;
color: pink;
}
}
Make sure to add vendor prefixes
确保添加供应商前缀
Demo: http://codepen.io/pstenstrm/pen/yKJoe
演示：http: //codepen.io/pstenstrm/pen/yKJoe
Update
更新
To remove the fading effect you can do:
要消除褪色效果，您可以执行以下操作：
b {
animation-duration: 1000ms;
animation-name: tgle;
animation-iteration-count: infinite;
}
@keyframes tgle {
0% {
opacity: 0;
}
49.99% {
opacity: 0;
}
50% {
opacity: 1;
}
99.99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
This is also a useful trick when animating image-sprites
这在动画图像精灵时也是一个有用的技巧
回答by Nit
Its easy to make a text blink:
使文本闪烁很容易：
window.setInterval(function() {
$('#blinkText').toggle();
}, 300);
and in html, just give as follows:
在 html 中，只需给出如下：
<p id="blinkText">Text blinking</p>
回答by Jukka K. Korpela
You seem to have copied code from the accepted answer to Blink not working in Chrome. The answer is wrong, however, and only tries to address WebKit browsers. The following code works in WebKit browsers, in modern Firefox, and in IE 10+ (I have set the parameters to simulate the way the classic <blink>worked):
您似乎已经从接受的Blink not working in Chrome答案中复制了代码。然而，答案是错误的，它只是试图解决 WebKit 浏览器的问题。以下代码适用于 WebKit 浏览器、现代 Firefox 和 IE 10+（我已设置参数以模拟经典的<blink>工作方式）：
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
blink {
animation-name: blink;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}
For a real cross-browser solution, you need JavaScript. It's straighforward timed changes; see e.g. some answers to Text blinking jQuery.
对于真正的跨浏览器解决方案，您需要 JavaScript。这是直接的定时更改；参见例如Text 闪烁 jQuery 的一些答案。
