HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 6

Opgave 6

Opgave 6 – Del 1

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

< div class=”heleSectionen1″ >< /div >

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

body {
background-color: black;
overflow: hidden;
}

.heleSectionen1 {
height:450px;
width:450px;
margin-left: 20%;
margin-top: 75px;
animation: run1 8s infinite linear;
}

Vi laver animationens keyframes senere.

Opgave 6 – Del 2

Nu skal du lave de 6 children/børn i den første div. Stil dig mellem de to div tags og tryk enter. Sæt nu denne div boks ind:

< div class=”heleSectionen1″ >
   < div id=”shadowPurple” >< /div >
   < div id=”shadowBlue” >< /div >
  < div id=”shadowGreen” >< /div >
< div id=”shadowYellow” >< /div >
< div id=”shadowOrange” >< /div >
< div id=”shadowRed” >< /div >
< /div >

Gå ned i dit CSS og lav dine id’er til shadowPurple, shadowBlue, shadowGreen, shadowYellow,. Læg mærke til at de næsten er ens, så kopier gerne den første id og efter du har sat kopien ind, så ret den til ved rotate og farven.

#shadowPurple{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  transform: rotate(300deg);
  box-shadow: 80px 30px 0px 0px rgba(190,11,224,0.5) inset;
  transition: 2s;
}
#shadowBlue{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  transform: rotate(240deg);
  box-shadow: 80px 30px 0px 0px rgba(45,149,191,0.5) inset;
  transition: 2s;
}
#shadowGreen{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  transform: rotate(180deg);
  box-shadow: 80px 30px 0px 0px rgba(78,186,111,0.5) inset;
  transition: 2s;
}
#shadowYellow{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  transform: rotate(120deg);
  box-shadow: 80px 30px 0px 0px rgba(235,235,4,0.5) inset;
  transition: 2s;
}

Opgave 6 – Del 3

Vi fortsætte med at lave de sidste id’er:

Gå ned i dit CSS og lav dine id’er til shadowOrange og shadowRed. Læg mærke til at de næsten er ens, så kopier gerne den første id og efter du har sat kopien ind, så ret den til ved rotate og farven.

#shadowOrange{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  transform: rotate(60deg);
  box-shadow: 80px 30px 0px 0px rgba(235,101,9,0.5) inset;
  transition: 2s;
}
#shadowRed{
  position: absolute;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 80px 30px 0px 0px rgba(235,15,104,0.5) inset;
  transition: 2s;
}

Opgave 6 – Del 4

Bliv i CSS’en og tilføj nu at når du holder musen(hover) over hovedboksen, så skal skyggerne blive tykkere. Det gør man ved at skrive først .heleSectionen1 og så pege(>) på den id til div’en som skal ændre sig og hvordan den skal ændre sig:

.heleSectionen1:hover #shadowPurple{
  box-shadow: 80px 200px 0px 0px rgba(190,11,224,0.5) inset;
  transition: 2s;
}
.heleSectionen1:hover #shadowBlue{
  box-shadow: 80px 200px 0px 0px rgba(45,149,191,0.5) inset;
  transition: 2s;
}
.heleSectionen1:hover #shadowGreen{
  box-shadow: 80px 200px 0px 0px rgba(78,186,111,0.5) inset;
  transition: 2s;
}
.heleSectionen1:hover #shadowYellow{
  box-shadow: 80px 200px 0px 0px rgba(235,235,4,0.5) inset;
  transition: 2s;
}
.heleSectionen1:hover #shadowOrange{
  box-shadow: 80px 200px 0px 0px rgba(235,101,9,0.5) inset;
  transition: 2s;
}
.heleSectionen1:hover #shadowRed{
  box-shadow: 80px 200px 0px 0px rgba(235,15,104,0.5) inset;
  transition: 2s;
}

Opgave 6 – Del 5

Bliv i CSS’en og gå nu op under .heleSectionen1 og skriv @keyframes ind så hele cirklen drejer rundt:

@keyframes run1 {
  to {transform: rotate(360deg)}
}