gpt4 book ai didi

html - 条纹 table 上的褪色背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 06:33:38 26 4
gpt4 key购买 nike

我有一个 bootstrap 条纹表 ( .table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;} ),我正在使用这一点 CSS 将用户的注意力吸引到更新的行:

.attention { animation: 3s attention; }
@keyframes attention {
0% { background-color: #bcf516; }
100% { background-color: initial; }
}

... 并添加 class="attention"动态到 <tr>其中曾经更新过的行。

因此更新了第 3 行的表格将如下所示:

<table class="table table-striped">
<tr><td>Row #1</td></tr>
<tr><td>Row #2</td></tr>
<tr class="attention"><td>Row #3</td></tr>
<tr><td>Row #4</td></tr>
</table>

它几乎就像一个魅力。对于白色行,它是完美的。但对于灰色行,渐变一直变为白色,然后突然弹回到初始灰色。

如何修复它,最好只使用 CSS?

最佳答案

只需从动画中移除 100% 状态,就会使用元素中定义的颜色。

.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #f9f9f9;
}

.attention {
animation: 3s attention;
}

@keyframes attention {
0% {
background-color: #bcf516;
}
}
<table class="table table-striped">
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #2</td>
</tr>
<tr class="attention">
<td>Row #3</td>
</tr>
<tr>
<td>Row #4</td>
</tr>
</table>

背景色的初始值为透明。因此,您将首先淡化为透明,然后在动画完成后恢复为定义的颜色。这就是为什么它适用于非彩色 tr


If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.ref

关于html - 条纹 table 上的褪色背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54410559/

26 4 0