我怎样才能只闪烁背景而不是文本[重复]答案

【问题标题】：How can I blink background only instead of text [duplicate]我怎样才能只闪烁背景而不是文本[重复]
【发布时间】：2021-04-22 12:10:17
【问题描述】：

我只需要闪烁背景颜色，而不是文本。而我无法做到这一点。我需要你的帮助。

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
        animation: blink 1s linear infinite;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

【问题讨论】：

只需将动画添加到背景容器中
@Sfili_81: OP 必须提到让 bg 在文本完整的情况下闪烁

标签： html css

【解决方案1】：

您实际上在text 类中添加了动画属性，而不是blink。换一个就好了。

另外，如果您正在为opacity 设置动画，那么 div 内的内容也会淡出。考虑到您只想为背景设置动画，请改为为 background-color 设置动画。

.blink{
        width:200px;
        height: 50px;
        background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
        animation: blink 1s linear infinite;
    }
.text {
        font-size: 25px;
        font-family: cursive;
        color: black;
}
    
@keyframes blink {
  0%{background-color: magenta;}
  50%{background-color: white;}
  100%{background-color: magenta;}
}

<div class="blink">
  <span class="text">blinking text</span>
</div>

【讨论】：

告诉我如何关闭这个问题。

【解决方案2】：

而不是这个：

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
        animation: blink 1s linear infinite;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

这样做：

.blink{
        width:200px;
        height: 50px;
            background-color: magenta;
        padding: 15px;  
        text-align: center;
        line-height: 50px;
        animation: blink 1s linear infinite;
    }
.text{
        font-size: 25px;
        font-family: cursive;
        color: white;
    }
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}

<div class="blink">
  <span class="text">blinking text</span></div>

【讨论】：

感谢 D-Waqas 的帮助，但我希望文本稳定。只有背景闪烁。