HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 7

Opgave 7

Opgave 7 – Del 1

Åben en ny PEN i CODEPEN.IO
Start med at lave den yderste div boks med klassen squareStart

< div class=”squareStart” >< /div >

Nu skal du tilføje klassen for body og squareStart i din CSS.

body {
margin-left: 0;
margin-top: 0;
overflow: hidden;
}
.squareStart {
position: absolute;
height: 700px;
width: 100%;
background-color: black;
}

Opgave 7 – Del 2

Nu skal lave en child i den første div. Stil dig mellem de to div tags og tryk enter. Sæt nu denne div boks ind:

< div class=”squareStart” >
< div class=”square01S square031″ > < /div>
< /div>

Gå ned i dit CSS og lav din klasse til square01S og square031
Du vælger selv farven for din ramme 🙂

.square031 {
  margin-left: 150px;
  margin-top: 0px;
  animation: turnCircles1 100s linear infinite;
}
.square01S {
  position: absolute;
  height: 600px;
  width: 600px;
  border: 5px solid magenta;
  transform: scale(95%,95%) rotate(45deg);
  animation: turnCircles1 100s linear infinite;
}

Opgave 7 – Del 3

Gå op i HTML’en igen og lav denne div boks inden i den inderste div boks
< div class=”square01S” > < /div>

Kopier linjen og stil dig så imellem disse div tags og tryk enter. Fortsætte dette 15-20 gange. Så det sådan her ud mange gange.

< div class="square01S" >
 < div class="square01S" >
  < div class="square01S" >
   < div class="square01S" >
    < div class="square01S" >< /div>
   < /div>
  < /div>
 < /div>
< /div>

Opgave 7 – Del 4

Gå ned i CSS’en igen og tilføj denne animation:

Det der sker er at, alle div boksene hver mindskes med 5%(altså kun er 95% store ift til den de ligger inden i.)
Derfor bliver boksene mindre og mindre.
Dertil øges hastigheden for hvert child/barn/indre firkant. Den arver hastigheden fra de yderste og tilsætter sin egen.

@keyframes turnCircles1 {
  0% {transform: scale(95%,95%) rotate(9deg);}
  50% {transform: scale(95%,95%) rotate(360deg);}
}