Wie erstelle ich einen farbändernden Hintergrund?

Also, ich weiß, das kann ein einfaches Problem zu beheben, aber trotzdem ...Wie erstelle ich einen farbändernden Hintergrund?

Ich versuche, es zu machen, wo ich die Hintergrundfarbe der Webseite ändern kann, um wie unten:

red > yellow > green > blue > purple > pink > brown > red

Klicken Sie auf here für eine Demo einer Webseite, die das tut, was ich für meine Webseite versuche.

glaube ich, einige JavaScript auf dem Körperelement verwenden können:

<html> 
 
    <body id="body" bgcolor="#FFFFFF"> 
 
     <script> 
 
      var body = document.getElementById('body'); /* Get 
 
      the element with the id of 'body' */ 
 
       
 
      /* I need some javascript to make the 'hex' 
 
      variable change accordingly, then call the setColor() with 
 
      the parameter as a string for the hex code to change the          
 
      background color */ 
 
       
 
      function setColor(hex) { 
 
       body.setAttribute("bgcolor", hex); /* Set the 
 
       attribute bgcolor to the counter variable */ 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

Ich muss es einfach zu machen, wo die Hex-Variable Änderungen in der Reihenfolge, wie ich oben erwähnt. Ich brauche eine for-Schleife, eine while-Schleife oder eine Schleife, um den Prozess der Hintergrundfarbe zu wiederholen. Die Funktion setColor() ermöglicht es, die Farbe einfach zu ändern. Kann jemand das in eine Webseite implementieren? Vielen Dank!

Quelle

2017-02-03 Ben Stafford

Sie müssen JavaScript nicht verwenden, um diesen Effekt zu erzielen. Mit CSS-Animation können Sie Ihren eigenen funky Hintergrund erstellen.

.background Ruft eine Eigenschaft namens Animation mit einem Namen (in diesem Fall bg-animation), die durch alle Arten von Farben loops (und verblasst). Sie geben die Animation selbst innerhalb von @keyframes an. Die Animationszeit ist auf 10 Sekunden oder 10s eingestellt und kann alles sein.

Lesen Sie mehr über at MDN.

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    animation: bg-animation 10s infinite; 
 
} 
 

 
@-webkit-keyframes bg-animation { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    15% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: green; 
 
    } 
 
    45% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: purple; 
 
    } 
 
    75% { 
 
    background-color: pink; 
 
    } 
 
    90% { 
 
    background-color: brown; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 

 
@keyframes bg-animation { 
 
    0% { 
 
    background-color: red; 
 
    } 
 
    15% { 
 
    background-color: yellow; 
 
    } 
 
    30% { 
 
    background-color: green; 
 
    } 
 
    45% { 
 
    background-color: blue; 
 
    } 
 
    60% { 
 
    background-color: purple; 
 
    } 
 
    75% { 
 
    background-color: pink; 
 
    } 
 
    90% { 
 
    background-color: brown; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
}

<div class="background"></div>

Quelle

2017-02-03 20:19:35 Roy

Diese Methode ist ein wenig zu schreiben lange, aber es funktioniert! Vielen Dank! –

@BenStafford Sie können es vereinfachen, indem Sie eine Sass-Funktion oder Mixin verwenden. – Roy

Ich habe noch nie so eine hypnotisierende Ausgabe auf dieser Seite gesehen% -) – CodingNinja

Verwendung setInterval Verfahren erzeugen Farbe innerhalb des Callback-zufällig und den Hintergrund aktualisieren. Sie können einen Übergang bereitstellen, während Sie die Farbe mithilfe der Eigenschaft CSS transition ändern. Der Farbcode kann zufällig mit Hilfe der Methode Math.random, Math.floor und Number#toString generiert werden.

Wenn Sie zwischen einem Array von Farbcodes wechseln möchten, verwenden Sie ein Array mit einer Counter-Variablen.

setInterval(function() { 
 
    document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
 
}, 2000)

body { 
 
    background:red; 
 
    -webkit-transition: background-color 2000ms linear; 
 
    -moz-transition: background-color 2000ms linear; 
 
    -o-transition: background-color 2000ms linear; 
 
    -ms-transition: background-color 2000ms linear; 
 
    transition: background-color 2000ms linear; 
 
}

Quelle

2017-02-03 20:20:48

Dies wäre mein Ansatz, mit Javascript. Setinterval ist der Weg zu gehen, wenn Sie Javascript verwenden. – mttprvst13

Das ist wirklich komisch. Wenn ich meine Maus herumbewege, hat die Ausgabe eine sehr glatte Wirkung, aber wenn meine Maus still ist, gibt es kein Fade und es ist nicht sehr glatt. – CodingNinja

Wie erstelle ich einen farbändernden Hintergrund?

Antwort

Verwandte Themen