如何让网站上的文字闪烁？ [复制]答案

【问题标题】：How to make text blink on website? [duplicate]如何让网站上的文字闪烁？ [复制]
【发布时间】：2020-09-01 23:46:13
【问题描述】：

我正在制作一个网站，我希望页面上的超链接闪烁。不管它有多快，只要不要太慢。如果我可以让它以不同的颜色闪烁也很酷。

我尝试过使用 text-decoration:blink;在 css 中，但这不起作用。

我已将此添加到 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;
}

好像没用

【问题讨论】：

请不要...
1990 年代的人打电话并不希望他们的<blink> 回来。事实上，1990 年代提供了数十亿美元来保持标签远离。
请使用 Comic Sans。 <marquee> 仍然很酷，对吧？？
Comic Sans 和字幕已经到位。我现在只需要眨眼。
我真的希望被链接的网站是个笑话

标签： html css

【解决方案1】：

您可以使用 CSS 动画轻松做到这一点。

a {   
  animation-duration: 400ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

你也可以扩展它来改变颜色。像这样的东西：

@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;
 }
}

确保添加供应商前缀

演示：http://codepen.io/pstenstrm/pen/yKJoe

更新

要消除褪色效果，您可以这样做：

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

这在动画图像精灵时也是一个有用的技巧

【讨论】：

甜蜜！有什么办法可以消除这种褪色效果？
我已经更新了我的答案，说明如何消除褪色效果

【解决方案2】：

让文字闪烁很容易：

window.setInterval(function() {
$('#blinkText').toggle();
}, 300);

在html中，只需给出如下：

<p id="blinkText">Text blinking</p>

【讨论】：

我没有看到任何 jquery 标记。

【解决方案3】：

您似乎已将已接受答案中的代码复制到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;
}

对于真正的跨浏览器解决方案，您需要 JavaScript。这是直截了当的定时变化；参见例如Text blinking jQuery的一些答案。

【讨论】：