HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 9

Opgave 9

Opgave 9 – Del 1

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

< div class=”alleCirkler” >< /div >

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

body {
background-color: black;
}
.alleCirkler {
margin-left: 40%;
margin-top: 100px;
transform: scale(150%, 150%);
}

Opgave 9 – 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=”alleCirkler” >
< div id=”cirklen-0″ class=”cirklen99″ > < /div>
< /div>

Gå ned i dit CSS og lav din klasse til cirklen99 og id’en til cirklen-0
Du vælger selv farven for din ramme 🙂

.cirklen99 {
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: 1px solid magenta;
  margin-left: 3px;
  transform: scale(95%,95%);
} 
#cirklen-0 {
  animation: rotate99 10s linear infinite;
}

Opgave 9 – Del 3

Gå op i HTML’en igen og lav denne div boks inden i den inderste div boks

< div class=”alleCirkler” >
< div id=”cirklen-0″ class=”cirklen99″ >
< div class=”cirklen99″ > < /div>
< /div >
< /div >

Kopier linjen
< div class=”cirklen99″ > < /div>
og stil dig så imellem disse div tags og tryk enter. Paste nu linjen kun med klassen ind. Fortsætte dette 9 gange. Så det sådan her ud med 10 div bokse til sidst.

< div class="cirklen99" >
 < div class="cirklen99" >
  < div class="cirklen99" >
   < div class="cirklen99" >
    < div class="cirklen99" >< /div>
   < /div>
  < /div>
 < /div>
< /div>

Opgave 9 – 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 cirkel. Den arver hastigheden fra de yderste og tilsætter sin egen.

@keyframes rotate99 {
  0% {transform: scale(95%,95%) rotate(360deg);filter: hue-rotate(0deg)}
  100% {transform: scale(95%,95%) rotate(-360deg);filter: hue-rotate(360deg)}
}

Opgave 9 – Del 5

Gå op i HTML’en igen og tilføj disse 3 billeder. Husk det skal ligge inde i den store div med klassen class=”alleCirkler”

Opgave 9 – Del 6

Gå ned i CSS’en igen og tilføj det sidste for at style de sidste 3 cirkel bokse:

.cirklen-01 {
  margin-left: -5px;
}
#cirklen-00 {
  margin-left: 72px;
  animation: rotate099 10s linear infinite;
}
#cirklen-000 {
  margin-top: 72px;
  animation: rotate99 10s linear infinite;
}
#cirklen-0000 {
  margin-left: 72px;
  margin-top: 72px;
  animation: rotate099 10s linear infinite;
}

Opgave 9 – Del 7

Bliv i CSS’en og tilføj den sidste animation:

@keyframes rotate099 {
  0% {transform: scale(95%,95%) rotate(-360deg);filter: hue-rotate(0deg)}
  100% {transform: scale(95%,95%) rotate(360deg);filter: hue-rotate(360deg)}
}