2

私はこの素晴らしいCSSコードを使用して、4色の遷移を循環することにより、背景色をゆっくりと自動的に変更しています。

これをいくつかの個別のDivに適用し、それらすべてを異なる色で開始させたいと思います。この効果は、ユーザーの操作なしで各セルの色が変わるテーブルのように機能します。この効果はページ内の任意の1つの要素に適用できますが、開始色を変えて複数回使用したいと思います。

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;
}
4

1 に答える 1

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>
于 2013-02-18T10:52:53.583 に答える