webkit-keyframes脉冲背景颜色变化

Question

webkit-keyframes脉冲背景颜色变化

Ada*_*own 2 webkit background colors css-animations

我正在使用这个很棒的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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

bla*_*arg 8

这应该现在有效.在第一个div之后创建的每个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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	11388 次
最近记录：	11 年，7 月前