我正在建立一个网站,我希望页面上的超链接闪烁.它的速度无关紧要,但速度不会太慢.如果我可以让它以不同的颜色闪烁,那也很酷.
我尝试过使用文字装饰:眨眼; 在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; }
似乎没有用
你可以使用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; } }
在动画图像精灵时,这也是一个有用的技巧