Christiane Weigel Professional Expert for Digital Media

Webentwicklung & Webprogrammierung, Webdesign & Grafikdesign, Projektmanagement & Projektberatung, Suchmaschinenoptimierung & Online-Marketing.
Seit 2005 Ihre professionelle Expertin für die Erstellung von Websites und Online-Shops in Berlin Zehlendorf.

Box mit animiertem Verlauf HTML & CSS

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!

Dies ist eine Box mit animiertem Verlauf

Tipps, Tricks, Snippets und Scripts rund ums Web

Dabei kann es sich um die DSGVO, neue Designs oder auch ganz neue Technologien im Web gehen. Und ich stelle immer mal wieder technische Informationen, Codesnippets und kleine Tutorials ein.