我在CSS代码中设置了此CSS属性text-decoration:blink
。不幸的是,它仅适用于Firefox。必须有一种方法可以显示Crome中的闪烁效果。你们必须有答案。
答案在这里:http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation。在此示例中,类.blink将使某些内容闪烁...您必须编写两次内容,因为当Firefox或Opera不需要Chrome时,Chrome需要-webkit-。
<style>
/**
* Emulating <blink> using WebKit CSS3 animation
* This code is part of John Smith's blog
*
* Copyright 2010 by John Smith, All Rights Reserved
*
* @link http://www.john-smith.me/emulating--lt-blink-gt--using-webkit-css3-animation
* @date 18th October 2010 at 11:01 p.m.
* @author John Smith
*/
@-webkit-keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
@keyframes blinker { from {opacity:1.0;} to {opacity:0.0;} }
.blink {
text-decoration:blink;
-webkit-animation-name:blinker;
animation-name:blinker;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function:cubic-bezier(1.0,0,0,1.0);
animation-timing-function:cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration:1s;
animation-duration:1s;
}
</style>
您可以(根据需要)为旧版浏览器保留(或不保留)旧的眨眼属性。
我更喜欢只使用-webkit-(一次),并且我保留文本装饰,因为Opera和Firefox知道它。 ((对于其他动画,别无选择。只是眨眨眼,他们已经知道该怎么做)。
但这只是因为我不喜欢写两次,而且我很懒。这不是一个建议。
很遗憾,Chrome浏览器不支持此属性的CSS闪烁值。您将需要使用jQuery创建相同的效果。类似于http://archive.plugins.jquery.com/project/blink
You never NEED jQuery具有JavaScript效果。 jQuery是一个完整的JavaScript库,这意味着只需几行代码即可完成,而无需加载整个库。现在,如果您已经在使用jQuery,那么它会容易得多。
[使用CSS闪烁文本效果仅使用HTML和CSS的一种非常简单的使文本闪烁效果的方法,以下是工作示例https://khaalipaper.com/html/blink-text-effect-using-css3.php