Hier geht es darum, eine Box mit animiertem Verlauf HTML & CSS zu erstellen:
Dafür erstelle ich eine Box mit dem Beispielmaß 300x300px und den Klassen „verlauf-box“ und „anim-verlauf“. Logischerweise geht das mit jeder Größe (auch Prozentwerten). Dabei verändert sich der Verlauf entsprechend dem Format, wenn responsives Verhalten oder andere Seitenverhältnisse auftreten.
Das HTML:
<div class="verlauf-box anim-verlauf">Dies ist eine Box mit animiertem Verlauf</div>
Das CSS:
.verlauf-box {
width: 300px;
height: 300px;
color: #fff;
padding: 20px;
background: linear-gradient(121deg, #c3006b 0%, #ffffff 100%),
linear-gradient(121deg, #c3006b 0%, #0088c2 100%),
linear-gradient(127deg, #c3006b 0%, #ffffff 100%),
radial-gradient(107% 142% at 15% 104%, #ffffff 0%, #0088c2 100%),
radial-gradient(100% 100% at 50% 0%, #ffffff 0%, #0088c2 100%),
radial-gradient(100% 100% at 50% 0%, #c3006b 0%, #0088c2 100%),
linear-gradient(127deg, #ffffff 0%, #0088c2 100%);
background-blend-mode: overlay, color, overlay, difference, color-dodge, difference, normal;
}
.anim-verlauf {
background-size:150% 120%;
animation: verlauf 8s ease infinite;
}
@keyframes verlauf {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Und so sieht das dann aus: Viel Spaß beim Spielen!