Bilder-Farbrotation mit Gradient

Der CSS Blend-Mode - Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen.

       


<style>

/* Bilder-Farbrotation mit Gradient */

div.rotate {
 
backgroundurl("hintergrundbild.png"),
 
linear-gradient(233deg#E56420#C22525#3D9C31#37BBDE);
 
width444px;
 
height207px;
 
background-sizeCover;
 
background-blend-modehard-light;
 
animationhue-rotate 20s linear infinite;
}

@
keyframes hue-rotate {
 
from {
  
filterhue-rotate(0);
 }
 
to {
  
filterhue-rotate(360deg);
 }
}
</
style>

<
div class="rotate"></div>

➤ Das Hintergrundbild bewegen: Animierte Box mit Keyframes

Siehe auch: Animationen mit Keyframes, Kompass-Animation und Eine Animation ab einer bestimmten Scroll-Position starten

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<thead> Tabellenkopf

CSS - Markierte Checkbox farbig hervorheben

PHP - Datei mit der höchsten Nummer in einem Verzeichnis ermitteln

JavaScript - Anzahl der HTML-Tags

MySQL - Datensätze sortieren nach Länge der Zeichen