Question

我想使用html和css为两个闪烁的类制作两种不同的样式。我的示例代码如下：

.blinking{
    animation:blinkingText 0.8s infinite;
}
.blinking2{
    animation:blinkingText 0.8s infinite;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: red; }
    50%{    color: red; }
    99%{    color: red; }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br/>
<span class="blinking2">Am I blinking?</span>

我想将眨眼的2类变成黄色。有什么办法可以做到这一点？

Answer 1

您可以将另一个keyframe用于另一个blinkingText（黄色）。

尝试一下：

.blinking{
    animation:blinkingText 0.8s infinite;
}
.blinking2{
    animation:blinkingText2 0.8s infinite;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: red; }
    50%{    color: red; }
    99%{    color: red; }
    100%{   color: #000;    }
}
@keyframes blinkingText2{
    0%{ color: #000;    }
    49%{    color: yellow; }
    50%{    color: yellow; }
    99%{    color: yellow; }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br/>
<span class="blinking2">Am I blinking?</span>

Answer 2

使用CSS变量，您将只需要一个关键帧：

.blinking{
    animation:blinkingText 1s infinite;
}
.yellow{
    --c:yellow;
}
@keyframes blinkingText{
    0%{ color: #000;    }
    49%{    color: var(--c,lightblue); }
    50%{    color: var(--c,lightblue); }
    99%{    color: var(--c,lightblue); }
    100%{   color: #000;    }
}

<span class="blinking">Am I blinking?</span><br>
<span class="blinking yellow">Am I blinking?</span><br>
<span class="blinking" style="--c:lightgreen">Am I blinking?</span>

为CSS中两个不同的闪烁类创建两种不同的样式

2 个答案: