HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 8

Opgave 8

Opgave 8 – Del 1

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

< div class=”circlesStart” >< /div >

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

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

Opgave 8 – 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=”circlesStart” >
< div id=”circle031″ class=”circle01S”> < /div>
< /div>

Gå ned i dit CSS og lav din klasse til circle01S og en id til circle031
Du vælger selv farven for din ramme 🙂

#circle031 {
  margin-left: 150px;
  margin-top: 0px;
}
.circle01S {
  position: absolute;
  height: 600px;
  width: 600px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='600' ry='600' stroke='%23EC3463' stroke-width='25' stroke-dasharray='50%25%2c 50%25' stroke-dashoffset='86' stroke-linecap='square'/%3e%3c/svg%3e");
  transform: scale(95%,95%) rotate(90deg);
  animation: turnRound1 100s linear infinite;
}

Opgave 8 – Del 3

Gå op i HTML’en igen og lav denne div boks inden i den inderste div boks
< div class=”circle01S” > < /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="circle01S" >
 < div class="circle01S" >
  < div class="circle01S" >
   < div class="circle01S" >
    < div class="circle01S" >< /div>
   < /div>
  < /div>
 < /div>
< /div>

Opgave 8 – 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 turnRound1 {
  0% {transform: scale(95%,95%) rotate(9deg);}
  50% {transform: scale(95%,95%) rotate(360deg);}
}