Question

我正在建立一个网站，我希望页面上的超链接闪烁。它的速度无关紧要，但速度不会太慢。如果我可以让它以不同的颜色闪烁，那也很酷。

我尝试过使用文字装饰：眨眼;在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;
}

似乎无法正常工作

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

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

Answer 2

很容易让文字闪烁：

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

并在html中，只需给出如下：

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

Answer 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的一些答案。

如何让网站上的文字闪烁？

3 个答案:

更新