闪烁在 Chrome 中不起作用 [重复]答案

【问题标题】：Blink not working in Chrome [duplicate]闪烁在 Chrome 中不起作用 [重复]
【发布时间】：2019-10-28 18:07:11
【问题描述】：

我在我的应用程序中使用blink 来显示错误消息。问题是它可以在 Firefox 中运行，但不能在 Chrome 中运行。我不知道问题是什么。如何让它在 Chrome 中运行？

【问题讨论】：

Chrome 中已弃用 developer.mozilla.org/en-US/docs/Web/HTML/Element/blink

【解决方案1】：

将以下代码添加到您的 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;
}

【讨论】：

是的，但这是专门针对 Chrome 的问题，所以答案是正确的。

【解决方案2】：

blink, .blink {
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 67% { opacity: 0 }}
@-moz-keyframes blink {  67% { opacity: 0 }}
@-o-keyframes blink {  67% { opacity: 0 }}
@keyframes blink {  67% { opacity: 0 }}

【讨论】：

此代码适用于 crome 以及 firefox IE 也只需添加您的文本

【解决方案3】：

它已被弃用，因此您可以尝试使用 javascript 来实现。这是我用jquery为你做的一个例子：http://jsfiddle.net/FPsdy/很简单：

window.setInterval(function(){
  $('.blink').toggle();
}, 250);

【讨论】：

【解决方案4】：

Blink 已弃用，您不应使用它。

http://www.w3.org/wiki/HTML/Elements/blink

【讨论】：

它没有被弃用，它从未成为任何标准的一部分。弃用的是 text-decoration: blink developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
嘘......如果没有别的，它很适合开玩笑。非常适合 404 页之类的东西。 “404 错误 - 您找到了 1998 年的页面，您不应该在这里”
会更适合题为“Blink 是否已弃用，我应该使用它吗？”的问题

【解决方案5】：

尝试将以下代码行添加到您的 css 文件中。

blink {
   -webkit-animation-name: blink; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-timing-function: cubic- 
    bezierr(1.0,0,0,1.0);
    -webkit-animation-duration: 1s;
  }

这是因为许多浏览器不支持少数 css 函数。您应该尝试更新您的 chrome 浏览器。

【讨论】：

【解决方案6】：

只需要导入一个 jquery.min.js 文件即可使用此代码。

window.setInterval(function(){
    $('.blink').css("opacity","0.5");
    window.setTimeout(function(){
        $('.blink').css("opacity","1");
    },750);
}, 1500);

【讨论】：

-1。这在没有 jQuery 的情况下是可行的。您也可以使用 CSS 动画。将 JavaScript 用于可以并且应该在 CSS 中完成的事情是我的一个小烦恼。