Bilder-Farbrotation mit Gradient

Der CSS Blend-Mode - Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen. Klicke aufs Bild, um eine zufällige Hintergrundfarbe hinzuzufügen.

       


<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(0deg);
 }
 
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.

<header> Kopfbereich

CSS - Transparenter Farbverlauf

PHP - Das aktuelle Bild (einer Webcam) anzeigen

JavaScript - Ein Array von Zahlen mit dem Bucketsort-Algorithmus sortieren

MySQL - Datensatz eintragen