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.
Prvně vždy vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.
JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu
(</script>).
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í.
Nakonec divy vložíme do HTML divu.
<div id="grafika"></div>
<script>
for (let i = 1; i <= 20; i++) {
const div = document.createElement("div");
div.classList.add("animace");
div.style.width = (i * 4.3) + "px";
div.style.height = (i * 4.3) + "px";
div.style.background = "rgba(107,6,15,0.05)";
div.style.border = "3.5px double rgba(255,255,255,0.2)";
div.style.borderRadius = "35px";
div.style.position = "absolute";
div.style.top = "25%";
div.style.left = (i * 13.5) + "px";
div.style.rotate = (i * 5) + "deg";
div.style.animationDelay = (i * 0.01) + "s";
document.getElementById("grafika").appendChild(div);
}
</script>
<! --
.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);}
}
-- >