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

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

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