如何使文字在网站上闪烁？ [英] How to make text blink on website?

问题描述

我正在制作一个网站，我想要一个超链接在页面上闪烁。它不会有多快，它只是不太慢。

我尝试过使用text-decoration：blink;

b $ b

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

似乎不起作用

  a {
 animation-duration：400ms; 
 animation-name：blink; 
 animation-iteration-count：infinite; 
 animation-direction：alternate; 
} 
 
 @keyframes blink {
从{
 opacity：1; 
} 
 
到{
 opacity：0; 
} 
} 
  

您也可以扩展它以更改颜色。使用类似：

  @keyframes blink {
 0％{
 opacity：1; 
 color：pink; 
} 
 
 25％{
 color：green; 
 opacity：0; 
} 
 
 50％{
 opacity：1; 
 color：blue; 
} 
 
 75％{
不透明度：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; 
} 
} 
  

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

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.

I've added this to the css-file, but now what?:

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

解决方案

You can do this pretty easily with CSS animations.

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

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

这篇关于如何使文字在网站上闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！