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 {
background: url("hintergrundbild.png"),
linear-gradient(233deg, #E56420, #C22525, #3D9C31, #37BBDE);
width: 444px;
height: 207px;
background-size: Cover;
background-blend-mode: hard-light;
animation: hue-rotate 20s linear infinite;
}
@keyframes hue-rotate {
from {
filter: hue-rotate(0);
}
to {
filter: hue-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.
<section> Abschnitt
CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen