CSS Animirano Ozadje - Dinamični Efekti

Animirana ozadja so odličen način za dodajanje dinamike tvoji spletni strani brez obremenjevanja zmogljivosti. V tem primeru boš spoznal, kako ustvariti tekoče gradient animacije in interaktivne efekte z uporabo čistega CSS-ja.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Animirano Ozadje</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animated-bg">
        <div class="content">
            <h1>Animirano Ozadje</h1>
            <p>Primer gradientnega ozadja z neskončno animacijo.</p>
            
            <div class="interactive-bg">
                <h3>Interaktivni Element</h3>
                <p>Premakni miško čez ta element za efekt.</p>
            </div>

            <div class="wave-bg">
                <h3>Valoviti Efekt</h3>
                <p>Ozadje z animiranim valovitim vzorcem.</p>
            </div>
        </div>
    </div>
</body>
</html>
                    

REZULTAT

Ozadje z animiranim gradientom

Ozadje je narejeno z uporabo linearnega barvnega prehoda, kjer barve prehajajo med: lightblue -> lightyellow -> orange -> purple
Animacija gradienta:
1. z uporabo @keyframes gradientAnimacija se ozadje premika (v animaciji) s spreminjanjem background-position
2. animacija naredi, da gradient "teče" od leve proti desni in nazaj

Učinek je dosežen z:

background-size: 200% 200%;
animation: gradientAnimacija 10s ease infinite;

Animiran container

Element .container je zasnovan kot škatla z zaobljenimi robovi (border-radius), s sencami (box-shadow)

Animacija senčenja (shadowChange):

animacija spreminja barvo sence okoli elementa na podlagi ključnih faz (0% -> 100%)
barve se postopoma spreminjajo od modre, rumene, oranžne do vijolične:

@keyframes shadowChange {
    0% {box-shadow: ... rgba(135, 206, 250, 0.5);} /* Modra senca */
   25% {box-shadow: ... rgba(255, 255, 150, 0.5);} /* Rumena senca */
   50% {box-shadow: ... rgba(255, 165, 0, 0.5);}   /* Oranžna senca */
   75% {box-shadow: ... rgba(153, 101, 255, 0.5);} /* Vijolična senca */
   100% {box-shadow: ... rgba(135, 206, 250, 0.5);} /* Nazaj na modro */
}

Modularna zasnova

html in body uporabljata osnoven gradient, še brez dodatnih elementov
.container je glavni dinamični element na strani, ki se prikazuje na sredi strani in služi kot vizualno osrednji del.