HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – MIDDEL 5

Opgave 5

Opgave 5 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen scene1
< div class=”heleSpiralen1″ >< /div >
 
Nu skal du tilføje klassen for body og heleSpiralen1 i din CSS.
body {
  background-color: black;
  overflow: hidden;
}
.heleSpiralen1 {
  position: absolute;
  margin-left: 30%;
  margin-top: 50px;
  height: 460px;
  width: 460px;
  transform-origin: center;
  animation: turningAround1 10s linear infinite;
}
Vi laver keyframes senere 🙂

Opgave 5 – Del 2

Nu skal vi have 12 div bokse(børn) ind, så det ser således ud:

 < div class=”heleSpiralen1″ >
      < div class=”spiralStreng1″ >< /div >
      < div class=”spiralStreng2″ >< /div >
      < div class=”spiralStreng3″ >< /div >
      < div class=”spiralStreng4″ >< /div >
      < div class=”spiralStreng5″ >< /div >
      < div class=”spiralStreng6″ >< /div >
      < div class=”spiralStreng7″ >< /div >
      < div class=”spiralStreng8″ >< /div >
      < div class=”spiralStreng9″ >< /div >
      < div class=”spiralStreng10″ >< /div >
      < div class=”spiralStreng11″ >< /div >
      < div class=”spiralStreng12″ >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasser til spiralStrengene bemærk at de er ens på nær deres transform og filter. Så når du har lavet en, kopier denne og sæt den ind 11 gange og ret så på transform og filter graderne(deg)
.spiralStreng1 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
}
.spiralStreng2 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(30deg);/*36deg for kun 8 arme*/
  filter:hue-rotate(30deg);
}
.spiralStreng3 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(60deg);/*72deg for kun 8 arme*/
  filter:hue-rotate(60deg);
}
.spiralStreng4 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(90deg);/*108deg for kun 8 arme*/
  filter:hue-rotate(90deg);
}
.spiralStreng5 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(120deg);/*144deg for kun 8 arme*/
  filter:hue-rotate(120deg);
}
.spiralStreng6 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(150deg);/*180deg for kun 8 arme*/
  filter:hue-rotate(150deg);
}
.spiralStreng7 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(180deg);/*216deg for kun 8 arme*/
  filter:hue-rotate(180deg);
}
.spiralStreng8 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(210deg);/*252deg for kun 8 arme*/
  filter:hue-rotate(210deg);
}
.spiralStreng9 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(240deg);/*288deg for kun 8 arme*/
  filter:hue-rotate(240deg);
}
.spiralStreng10 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(270deg);/*324deg for kun 8 arme*/
  filter:hue-rotate(270deg);
}
.spiralStreng11 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(300deg);
  filter:hue-rotate(300deg);
}
.spiralStreng12 {
  position: absolute;
  margin-top: 230px;
  margin-left: 230px;
  transform: rotate(330deg);
  filter:hue-rotate(330deg);
}

Opgave 5 – Del 3

Nu skal vi lave 5 div bokse(børn), som er cirklerne, så det ser således ud:

 < div class=”heleSpiralen1″ >
      < div class=”spiralStreng1″ >
      < div class=”streng-dot1 a1″ >< /div >
      < div class=”streng-dot2 b1″ >< /div >
      < div class=”streng-dot3 c1″ >< /div >
      < div class=”streng-dot4 d1″ >< /div >
      < div class=”streng-dot5 e1″ >< /div >
    < /div >
< /div >
  • Gå ned i din CSS og lav klassen for streng-dot1
.streng-dot1 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking1 10s linear infinite;
}
@keyframes shrinking1 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; transform: scale(0%, 0%);}
}

Opgave 5 – Del 4

Nu skal vi have lavet den næste cirkel i armen streng-dot2:

.streng-dot2 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  margin-top: 5px;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking2 10s linear infinite;
}
@keyframes shrinking2 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 50px;transform: scale(0%, 0%);}
}

Opgave 5 – Del 5

Vi går videre med næste cirkel i armen streng-dot3:

.streng-dot3 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking3 10s linear infinite;
}
@keyframes shrinking3 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 100px;transform: scale(0%, 0%);}
}

Opgave 5 – Del 3

Nu skal vi lave 5 div bokse(børn), som er cirklerne, så det ser således ud:

 < div class=”heleSpiralen1″ >
      < div class=”spiralStreng1″ >
      < div class=”streng-dot1 a1″ >< /div >
      < div class=”streng-dot2 b1″ >< /div >
      < div class=”streng-dot3 c1″ >< /div >
      < div class=”streng-dot4 d1″ >< /div >
      < div class=”streng-dot5 e1″ >< /div >
    < /div >
< /div >
  • Gå ned i din CSS og lav klassen for streng-dot1
.streng-dot1 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking1 10s linear infinite;
}
@keyframes shrinking1 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; transform: scale(0%, 0%);}
}

Opgave 5 – Del 4

Nu skal vi have lavet den næste cirkel i armen streng-dot2:

.streng-dot2 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  margin-top: 5px;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking2 10s linear infinite;
}
@keyframes shrinking2 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 50px;transform: scale(0%, 0%);}
}

Opgave 5 – Del 5

Vi går videre med næste cirkel i armen streng-dot3:

.streng-dot3 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking3 10s linear infinite;
}
@keyframes shrinking3 {
  0% {opacity: 1;transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 100px;transform: scale(0%, 0%);}
}

Opgave 5 – Del 6

Vi går videre med næste cirkel i armen streng-dot4:

.streng-dot4 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking4 10s linear infinite;
}
@keyframes shrinking4 {
  0% {opacity: 1;margin-left: 0px; transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 150px;transform: scale(0%, 0%);}
}

Opgave 5 – Del 7

Vi laver nu den sidste cirkel i armen streng-dot5:

.streng-dot5 {
  position: absolute;
  height: 40px;
  width: 40px;
  background-image: linear-gradient(90deg, lightblue, blue);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4;
  animation: shrinking5 10s linear infinite;
}
@keyframes shrinking5 {
  0% {opacity: 1;margin-left: 0px; transform: scale(100%, 100%);}
  100% {opacity: 1;margin-left: 250px; margin-top: 200px;transform: scale(0%, 0%);}
}

Nu skal vi holde tungen lige i munden, for vi skal nu sætte div bokse(børn) med streng-dot1 til 5 ind som børn i < div class=”spiralStreng3″ > HER < /div > . I næste del opgave.

Opgave 5 – Del 8

Gå op i HTML’en og sætte dette(se kode) ind som børn i spiralStreng3, spiralStreng4, spiralStreng5, spiralStreng6, spiralStreng7, spiralStreng8, spiralStreng9, spiralStreng10, spiralStreng11 og spiralStreng12: 

< div class="streng-dot1 a1" >< /div >
< div class="streng-dot2 b1" >< /div >
< div class="streng-dot3 c1" >< /div >
< div class="streng-dot4 d1" >< /div >
< div class="streng-dot5 e1" >< /div >

Nu skal vi have ændret på a1, b1, c1, d1 og e1 => a2, b2, c2, d2 og e2

MEN KUN PÅ: på spiralStreng2, spiralStreng4, spiralStreng6, spiralStreng8, spiralStreng10 og spiralStreng12.

Opgave 5 – Del 9

Nu er vi nået til at få alle cirklerne animeret, så de ikke kører på samme tid: 

.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: 1s;
}
.b1 {
  animation-delay: 2s;
}
.b2 {
  animation-delay: 3s;
}
.c1 {
  animation-delay: 4s;
}
.c2 {
  animation-delay: 5s;
}
.d1 {
  animation-delay: 6s;
}
.d2 {
  animation-delay: 7s;
}
.e1 {
  animation-delay: 8s;
}
.e2 {
  animation-delay: 9s;
}

Opgave 5 – Del 10

Til allersidst animerer vi så hele spiralen 🙂 

Gå ned i CSS’en og under .heleSpiralen1 og skriv denne @keyframes ind

@keyframes turningAround1 {
  100% {transform: rotate(-360deg);} /*vend retning, fjern minus*/
}
   
     

Her under vises/eksekveres koden