gpt4 book ai didi

colors - webkit-keyframes 脉冲背景颜色变化

转载 作者:行者123 更新时间:2023-12-01 07:44:53 26 4
gpt4 key购买 nike

我正在使用这个很棒的 CSS 代码通过循环 4 种颜色的过渡来缓慢地自动更改背景颜色。

我想将此应用于几个单独的 Div,并让它们都以不同的颜色开始。效果就像一个表格,每个单元格都在改变颜色,无需用户交互。
我可以将此效果应用于页面中的任何单个元素,但我想多次使用它并使用不同的起始颜色。

我尝试只更改 Div 的起始颜色,但这似乎不起作用。有谁知道解决方案?

@-webkit-keyframes pulse 
{
0% {background-color: #45CEEF;}
25% {background-color: #FFF5A5;}
50% {background-color: #FFD4DA;}
75% {background-color: #99D2E4;}
100% {background-color: #D8CAB4;}
}
#div
{
background-color: #45CEEF;
-webkit-animation: pulse 40s infinite alternate;
}

最佳答案

现在应该可以了。在第一个之后创建的每个 div 中使用负时间偏移。改变每个的时间以保持它们不同的颜色。

  <html>
<head>


<style>

@-webkit-keyframes pulse
{
0% {background-color: #45CEEF;}
25% {background-color: #FFF5A5;}
50% {background-color: #FFD4DA;}
75% {background-color: #99D2E4;}
100% {background-color: #D8CAB4;}
}



#cell1
{
width:100px;
height:100px;

-webkit-animation: pulse 35s infinite;

}


#cell2
{
width:100px;
height:100px;

-webkit-animation: pulse 35s ease -3s infinite;


}

#cell3
{
width:100px;
height:100px;

-webkit-animation: pulse 35s ease -5s infinite;


}

</style>
</head>
<body>

<div id="cell1"></div>
<br/>

<div id="cell2"></div>
<br/>


<div id="cell3"></div>

</body>

关于colors - webkit-keyframes 脉冲背景颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14933658/

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