Zadání:
Vygenerujte sadu čtverců, která se bude zvětšovat a zanimujte ji.
K tomuto úkolu budeme potřebovat CSS animaci. Příklad CSS animace můžete vidět v editoru v komentáři. Další styly, které jsou divům přiřazeny jde vidět v komentáři.
PHP kód vždy začínáme symbolem menšítka, otazníkem a textem php (<?php), ukončujeme ho poté
otazníkem a většítkem (?>).
Vytvoříme cyklus FOR(). Cyklus nastavíme od jedničky a jeho počet opakování na 20.
V cyklu se vydvoří jednotlivé divy, kterým za pomoci $i můžeme měnit CSS stylování.
Celé nastylování v cyklu vložíme do echo.
<?php
for($i=1;$i<=20;$i++){
echo "<div class=\"animace\" style=\"
width: ",$i*4.3,"px; height:",$i*4.3,"px;
background: rgba(107,6,15,0.05);
border: 3.5px double rgba(255,255,255, 0.2);
border-radius: 35px;
position: absolute; top: 25%; left: ",$i*13.5,"px; right: -2000px;
rotate: ",$i*5,"deg;
animation-delay: ",$i*0.01,";\"></div>";
}
?>
<!.animace{
animation-name: ctverce;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes ctverce {
0% {transform: rotate(0deg);}
25% {background: rgba(107,6,15,0.15);}
50% {transform: rotate(270deg); background: rgba(107,6,15,0.35); border-radius: 0px; border: 3.5px double rgba(255,255,255, 0.2);}
75% {background: rgba(107,6,15,0.15);}
100% {background: rgba(107,6,15,0.05);}
}-->