gpt4 book ai didi

带有 steps() 的 CSS 动画计时函数尝试闪烁颜色,但颜色正在混合

转载 作者:太空宇宙 更新时间:2023-11-03 23:11:09 25 4
gpt4 key购买 nike

我一直在尝试使用以下 CSS 规则使两种颜色闪烁,但颜色最终混合在一起。

这是 jsfiddle:http://jsfiddle.net/1kyba3rd/

这是 CSS 规则:

<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;

/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
@keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>

最佳答案

闪烁无法正常工作,因为您在动画结束时设置了 background-color:yellow (100%) 并且 background-color:white 在一开始,将第一个设置为 50% 以便动画按预期工作 - demo

关于带有 steps() 的 CSS 动画计时函数尝试闪烁颜色,但颜色正在混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32521144/

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