gpt4 book ai didi

html - 未知背景颜色的 CSS 背景颜色脉冲动画

转载 作者:行者123 更新时间:2023-11-28 16:50:24 24 4
gpt4 key购买 nike

我有一个 div 列表,其背景颜色由 knockout.js observable 确定。第一个 div 的背景颜色应该略微闪烁以表明这是事件元素。我用 css 和关键帧创建了一个脉冲动画,但这似乎只适用于“编译时”已知的固定颜色。我能以某种方式让它更有活力吗?我已经尝试使用 inherit 关键字,但这不起作用

<div class="cch-current-storage" data-bind="style: { 'background-color': storageType.color }">Bla</div>
<div data-bind="style: { 'background-color': storageType.color }">Next</div>

<style>
.cch-current-storage {
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction:alternate-reverse;
animation-timing-function:ease
}

@@keyframes color {
from {background-color: red;}
to {background-color: inherit;}
}
</style>

最佳答案

首先有一个错字……css-current-storage vs .ccs-current-storage

我做了 fiddle ,你可以看这里 ( https://jsfiddle.net/z9modqt4/ )

CSS

div{
width: 100px;
height: 100px;
}
.css-current-storage {
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease;
}


@keyframes color {
to {
background-color: blue;
}
}

html

<div class="css-current-storage" style='background-color: yellow' >Bla</div>

如果我在 from 中留下空白(完全删除 from),它似乎可以工作

它违反直觉,因为它是从 tofrom 工作的。所以它在其他方向上起作用(因为 animation-direction: alternate-reverse 就像 Temani 在评论中说的那样)

关于html - 未知背景颜色的 CSS 背景颜色脉冲动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59181081/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com