循环div的背景颜色逐渐通过所有彩虹颜色| CSS [英] Loop div background-color through all rainbow colors gradually | CSS

问题描述

如何通过彩虹的所有颜色随时间改变div的背景颜色，然后再次将其设置回原来的颜色和无限处理的循环？

<下面的代码是我想要的结果，但只有一个div可以逐渐改变它的颜色。

 < div id =rainbow>< / div> 
  

。彩虹{背景颜色：蓝色;向左飘浮;宽度：70px;高度：70像素;边框：1px纯白色; } .rainbow：first-child {background-color：red; } .rainbow：nth-​​child（2）{background-color：orange; } .rainbow：nth-​​child（3）{background-color：yellow; } .rainbow：nth-​​child（4）{background-color：Chartreuse; } .rainbow：nth-​​child（5）{background-color：cyan; } .rainbow：nth-​​child（6）{background-color：blue; } .rainbow：nth-​​child（7）{background-color：DarkOrchid; } .rainbow：nth-​​child（8）{background-color：DeepPink; } .rainbow：nth-​​child（9）{background-color：red; } .rainbow：last-child {background-color：Chartreuse;向左飘浮;边框：1px纯白色; clear：both;}

 < div class =rainbow >原始颜色< / div>< div class =rainbow>经过一段时间< / div>< div class =rainbow>经过一段时间< / div>< div class =rainbow >经过一段时间< / div>< div class =rainbow>经过一段时间< / div>< div class =rainbow>经过一段时间< / div>< div class =彩虹>经过一段时间< / div>< div class =rainbow>经过一段时间< / div>< div class =rainbow>回到红色循环< / div>< br /> 




您可以创建 css动画来更改背景颜色。要制作动画循环，您可以添加 infinite ，并使颜色平滑过渡，您可以使用 linear

div {background-color：＃FF0000;动画：bgColor 5s无限线性;宽度：200px; height：100px;} @ keyframes bgColor {12.5％{background-color：＃FF0000; } 25％{background-color：＃FFA500; } 37.5％{background-color：＃FFFF00; } 50％{background-color：＃7FFF00; } 62.5％{background-color：＃00FFFF; } 75％{background-color：＃0000FF; } 87.5％{background-color：＃9932CC; } 100％{background-color：＃FF1493; }}

< div>< / div>

How to change the background-color of a div over time through all color of a rainbow and then set it back again to its original color and loop that process infinitely ?

The code below is the result I want but in just one div that changes its color gradually.

<div id="rainbow"></div>

.rainbow {
background-color: blue;  
  float:left;
  width: 70px;
  height:70px;
  border: 1px solid white;
 
}
.rainbow:first-child {
background-color: red;  
}
.rainbow:nth-child(2) {
background-color: orange;  
}.rainbow:nth-child(3) {
background-color: yellow;  
}.rainbow:nth-child(4) {
background-color: Chartreuse;  
}.rainbow:nth-child(5) {
background-color: cyan;  
}.rainbow:nth-child(6) {
background-color: blue;  
}.rainbow:nth-child(7) {
background-color: DarkOrchid;  
}.rainbow:nth-child(8) {
background-color: DeepPink;  
}.rainbow:nth-child(9) {
background-color: red;  
}
.rainbow:last-child {
background-color: Chartreuse;  
  float:left;
  border: 1px solid white;
  clear:both;
}

<div class="rainbow">Original color</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div>
<div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">After some time</div><div class="rainbow">Come back to red and loop</div>
<br style="clear:both">
All of the above in just one div

解决方案

You can create css animation to change background color. To make animation loop you can add infinite and to get smooth transition of colors you can use linear

div {
  background-color: #FF0000;
  animation: bgColor 5s infinite linear;
  width: 200px;
  height: 100px;
}
@keyframes bgColor {
  12.5% {
    background-color: #FF0000;
  }
  25% {
    background-color: #FFA500;
  }
  37.5% {
    background-color: #FFFF00;
  }
  50% {
    background-color: #7FFF00;
  }
  62.5% {
    background-color: #00FFFF;
  }
  75% {
    background-color: #0000FF;
  }
  87.5% {
    background-color: #9932CC;
  }
  100% {
    background-color: #FF1493;
  }
}

<div></div>

这篇关于循环div的背景颜色逐渐通过所有彩虹颜色| CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！