HTML & CSS

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

Opgave 7

Opgave 7 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen scene1
< div class=”hovedBoks1″ >< /div >
 
Nu skal du tilføje klassen for body og heleSpiralen1 i din CSS.
body {
  background-color: black;
}
.hovedBoks1 {
  height: 70px;
  width: 550px;
  margin-top: 50px;
  margin-left: 20%;
  display: flex;
}

Opgave 7 – Del 2

Nu skal vi have de 7 div bokse(børn) ind i HTML’en i det der skal være vores 1. række, så det ser således ud:

 < div class=”hovedBoks1″ >
      < div class=”square1 firkant1 grow3″ >< /div >
      < div class=”square1 firkant2 grow4″ >< /div >
      < div class=”square1 firkant3 grow5″ >< /div >
      < div class=”square1 firkant4 grow6″ >< /div >
      < div class=”square1 firkant5 grow7″ >< /div >
      < div class=”square1 firkant6 grow8″ >< /div >
      < div class=”square1 firkant7 grow9″ >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasser til square1 og firkant1 til 7.
.square1 {
  height: 20px;
  width: 20px;
  margin-top: 20px;
  margin-right: 50px;
  transition: 1s;
}
.firkant1 {
  background-color: #AE56E8;
}
.firkant2 {
  background-color: lightblue;
}
.firkant3 {
  background-color: lightgreen;
}
.firkant4 {
  background-color: yellow;
}
.firkant5 {
  background-color: orange;
}
.firkant6 {
  background-color: magenta;
}
.firkant7 {
  background-color: #EB086D;
}

Opgave 7 – Del 3

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 2 række, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant2 grow3″ >< /div >
      < div class=”square1 firkant3 grow3″ >< /div >
      < div class=”square1 firkant4 grow4″ >< /div >
      < div class=”square1 firkant5 grow5″ >< /div >
      < div class=”square1 firkant6 grow6″ >< /div >
      < div class=”square1 firkant7 grow8″ >< /div >
      < div class=”square1 firkant1 grow9″ >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til hovedBoks2.
.hovedBoks2 {
  height: 70px;
  width: 550px;
  margin-left: 20%;
  display: flex;
}
 

Opgave 7 – Del 4

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 3, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant3 grow2″ >< /div >
      < div class=”square1 firkant4 grow2″ >< /div >
      < div class=”square2 firkant5 grow11″ >< /div >
      < div class=”square2 firkant6 grow12″ >< /div >
      < div class=”square2 firkant7 grow13″ >< /div >
      < div class=”square1 firkant1 grow9″ >< /div >
      < div class=”square1 firkant2 grow9″ >< /div >
< /div > 

  • Gå ned i dit CSS og lav din klasse til square2.
.square2 {
  height: 20px;
  width: 20px;
  margin-top: 20px;
  margin-right: 50px;
  transform: scale(200%,200%);
}

Opgave 7 – Del 5

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 4. række, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant4 grow1″ >< /div >
      < div class=”square1 firkant5 grow1″ >< /div >
      < div class=”square2 firkant6 grow10″ >< /div >
      < div class=”square3 firkant7″ >< /div >
      < div class=”square2 firkant1 grow10″ >< /div >
      < div class=”square1 firkant2 grow1″ >< /div >
      < div class=”square1 firkant3 grow1″ >< /div >
< /div > 

  • Gå ned i dit CSS og lav din klasse til square3.
.square3 {
  height: 20px;
  width: 20px;
  margin-top: 20px;
  margin-right: 50px;
  border-radius: 2px;
  transform: scale(325%,325%);
}

Opgave 7 – Del 6

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 5 række, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant5 grow9″ >< /div >
      < div class=”square1 firkant6 grow9″ >< /div >
      < div class=”square2 firkant7 grow13″ >< /div >
      < div class=”square2 firkant1 grow12″ >< /div >
      < div class=”square2 firkant2 grow11″ >< /div >
      < div class=”square1 firkant3 grow2″ >< /div >
      < div class=”square1 firkant4 grow2″ >< /div >
< /div > 

Opgave 7 – Del 7

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 6 række, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant6 grow9″ >< /div >
      < div class=”square1 firkant7 grow7″ >< /div >
      < div class=”square1 firkant1 grow6″ >< /div >
      < div class=”square1 firkant2 grow5″ >< /div >
      < div class=”square1 firkant3 grow4″ >< /div >
      < div class=”square1 firkant4 grow2″ >< /div >
      < div class=”square1 firkant5 grow3″ >< /div >
< /div > 

Opgave 7 – Del 8

Nu skal vi have de den næste række ind med div bokse(børn) i HTML’en i det der skal være vores 7 række, så det ser således ud:

 < div class=”hovedBoks2″ >
      < div class=”square1 firkant7 grow8″ >< /div >
      < div class=”square1 firkant1 grow7″ >< /div >
      < div class=”square1 firkant2 grow6″ >< /div >
      < div class=”square1 firkant3 grow5″ >< /div >
      < div class=”square1 firkant4 grow4″ >< /div >
      < div class=”square1 firkant5 grow3″ >< /div >
      < div class=”square1 firkant6 grow3″ >< /div >
< /div > 

Opgave 7 – Del 9

Nu skal vi lave grow klasserne i CSS’en, så de kan blive animeret senere:

  • Gå ned i din CSS og lav klasserne for grow1 til grow9
.grow1 {
  animation: big1 2s linear infinite;
  animation-delay: 0.2s;
}
.grow2 {
  animation: big1 2s linear infinite;
  animation-delay: 0.4s;
}
.grow3 {
  animation: big1 2s linear infinite;
  animation-delay: 0.6s;
}
.grow4 {
  animation: big1 2s linear infinite;
  animation-delay: 0.8s;
}
.grow5 {
  animation: big1 2s linear infinite;
  animation-delay: 1s;
}
.grow6 {
  animation: big1 2s linear infinite;
  animation-delay: 1.2s;
}
.grow7 {
  animation: big1 2s linear infinite;
  animation-delay: 1.4s;
}
.grow8 {
  animation: big1 2s linear infinite;
  animation-delay: 1.6s;
}
.grow9 {
  animation: big1 2s linear infinite;
  animation-delay: 1.8s;
}

Opgave 7 – Del 10

Nu skal vi så lave grow10 til grow13, dem der skal styre de midterste firkanter i hele animationen:

.grow10 { /*skal matche grow1 */
  animation: big2 2s linear infinite;
  animation-delay: 0.2s;
}
.grow11 { /*skal matche grow2 */
  animation: big2 2s linear infinite;
  animation-delay: 0.4s;
}
.grow12 { /*skal matche grow3 */
  animation: big2 2s linear infinite;
  animation-delay: 0.6s;
}
.grow13 { /*skal matche grow7 */
  animation: big2 2s linear infinite;
  animation-delay: 1.4s;
}

Opgave 7 – Del 11

I den allersidste del, skal vi nu skrive vores @keyframes ind for både big1 og big2:

@keyframes big1 {
  0% {transform: scale(100%,100%);}
  20% {transform: scale(350%,350%);border-radius: 2px;}
  40% {transform: scale(100%,100%);}
  100% {transform: scale(100%,100%);}
}
@keyframes big2 {
  0% {transform: scale(200%,200%);}
  20% {transform: scale(350%,350%);border-radius: 2px;}
  80% {transform: scale(200%,200%);}
  100% {transform: scale(200%,200%);}
}
   
     

Her under vises/eksekveres koden