我怎样才能只闪烁背景而不是文本[重复]
Posted
技术标签:
【中文标题】我怎样才能只闪烁背景而不是文本[重复]【英文标题】: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 在文本完整的情况下闪烁 【参考方案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 的帮助,但我希望文本稳定。只有背景闪烁。以上是关于我怎样才能只闪烁背景而不是文本[重复]的主要内容,如果未能解决你的问题,请参考以下文章