是否可以使用CSS3在随机定时使两个文本闪烁？ [英] Is it possible to make two texts blink in random timing using CSS3?

问题描述

是否可以使两个文字在随机的时间闪烁？他们不应该一起眨眼，但他们应该在不同的阶段闪烁。我尝试使用正常 text-decoration：blink 完成，但没有使用..然后我尝试使用jQuery淡入和淡出文本有一些延迟，但我

Is it possible to make two texts blink in a random timing? They should not blink together, but they should blink at a different phase. I tried to accomplish by using normal text-decoration:blink, but no use.. Then I tried using jQuery to fade in and fade out the text with some delay, but I'm hoping there would be some easy way of doing this in CSS3.

推荐答案

可以使用CSS @keyframes 和动画。从你的问题不完全清楚，如果你想要不同的闪烁率（下面的示例），或相同的速率，只是不同步。如果您希望相同的速率不同步，请使用 animation-delay 逐个启动其中一个。

You can use CSS @keyframes and animation for this. It wasn't totally clear from your question if you want different rates of blinking (the sample below), or the same rate, just not in sync. If you want the same rate out of sync, use animation-delay to start one of them after the other.

演示： http://jsfiddle.net/ThinkingStiff/SYGpy/

HTML：

<div id="fast">fast</div>
<div id="regular">regular</div>
<div id="slow">slow</div>

CSS：

#fast {
    animation:             blink 300ms linear infinite;
        -moz-animation:    blink 300ms linear infinite; 
        -webkit-animation: blink 300ms linear infinite; 
}

#regular {
    animation:             blink 750ms linear infinite;
        -moz-animation:    blink 750ms linear infinite; 
        -webkit-animation: blink 750ms linear infinite; 
}

#slow {
    animation:             blink 1500ms linear infinite;
        -moz-animation:    blink 1500ms linear infinite; 
        -webkit-animation: blink 1500ms linear infinite; 
}

@keyframes             blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
    @-moz-keyframes    blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
    @-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }

这篇关于是否可以使用CSS3在随机定时使两个文本闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！