Loop div Hintergrundfarbe durch alle Regenbogenfarben allmählich

Wie ändert man die Hintergrundfarbe eines Divs im Laufe der Zeit durch alle Farben eines Regenbogens und stellt es dann wieder auf seine ursprüngliche Farbe und Schleife diesen Prozess unendlich?Loop div Hintergrundfarbe durch alle Regenbogenfarben allmählich | CSS

Der Code unten ist das Ergebnis, das ich will, aber in nur einem div, das seine Farbe allmählich ändert.

<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

Quelle

2016-09-27 TSR

Sie können CSS Animations zu Hintergrundfarbe ändern erstellen. Um Animationsschleife zu machen Sie infinite hinzufügen und bekommen reibungslosen Übergang von Farben können Sie 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>

Quelle

2016-09-27 13:19:30

Vielen Dank! Das habe ich gesucht! – TSR

Gern geschehen. –

Sie verwenden müssen Keyframes verwenden CSS zu animieren

#rainbow { 
 
background-color: blue; 
 
    float:left; 
 
    width: 70px; 
 
    height:70px; 
 
    border: 1px solid white; 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes example { 
 
    0% {background-color: red; } 
 
    25% {background-color: yellow; } 
 
    50% {background-color: blue; } 
 
    75% {background-color: green; } 
 
    100% {background-color: red; } 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {background-color: red; } 
 
    25% {background-color: yellow; } 
 
    50% {background-color: blue; } 
 
    75% {background-color: green; } 
 
    100% {background-color: red; } 
 
}

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

Quelle

2016-09-27 13:20:22 sailens

können Sie Dies erreichen mit Keyframes

.rainbow { 
 
    float:left; 
 
    width: 70px; 
 
    height:70px; 
 
    border: 1px solid white; 
 
    
 
} 
 

 
.rainbow:last-child { 
 
    float:left; 
 
    border: 1px solid white; 
 
    clear:both; 
 
} 
 
@keyframes color { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    10% { 
 
    background-color: orange; 
 
    } 
 
    20% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: Chartreuse; 
 
    } 
 
    40% { 
 
    background-color: cyan; 
 
    } 
 
    50% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: DarkOrchid; 
 
    } 
 
    70% { 
 
    background-color: DeepPink; 
 
    } 
 
    80% { 
 
    background-color: red; 
 
    } 
 
    90% { 
 
    background-color: red; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 

 
.rainbow { 
 
    animation: color 8s infinite; 
 
}

<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

Quelle

2016-09-27 13:21:23

Loop div Hintergrundfarbe durch alle Regenbogenfarben allmählich | CSS

Antwort

Verwandte Themen