HTML & CSS

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

Opgave 2

Opgave 2 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen rainbow1
< div class=”rainbow1″ >< /div >
 
Nu skal du tilføje klassen for body og rainbow1 i din CSS.
body {
  overflow: hidden;
  padding: 10%;
}
.rainbow1{
  margin: auto;
  width: 580px;
  height: 285px;
  -webkit-mask-image: radial-gradient(white 100%, rgba(0, 0, 0, 0.1) 50%);
  mask-image: radial-gradient(square, black 100%, rgba(0, 0, 0, 0.5) 50%);
}
Mask-image gør at alt ud over højden og vidden på denne boks ikke vises.
Med -webkit- sikre vi os at det virker i flere browsere.

Opgave 2 – Del 2

Nu skal vi have de 6 div bokse(børn) ind i HTML’en, så det ser således ud:

 < div class=”rainbow1″ >
      < div class=”rainbow1-magenta” >< /div >
      < div class=”rainbow1-purple” >< /div >
      < div class=”rainbow1-blue” >< /div >
      < div class=”rainbow1-green” >< /div >
      < div class=”rainbow1-yellow” >< /div >
      < div class=”rainbow1-orange” >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til rainbow1-magenta.
.rainbow1-magenta {
  position: absolute;
  width: 500px;
  height: 250px; /* as the half of the width */
  border-top-left-radius: 290px;  /* 250px of height + 40px of border*/
  border-top-right-radius: 290px; /* 250px of height + 40px of border */
  border: 40px solid magenta;
  border-bottom: 0;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
}

Opgave 2 – Del 3

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for rainbow1-purple:

  • Gå ned i dit CSS og lav din klasse til rainbow1-purple.
.rainbow1-purple {
  position: absolute;
  width: 420px;
  height: 210px; /* as the half of the width */ 
  border-top-left-radius: 250px; /* 210px of height + 40px of border*/
  border-top-right-radius: 250px; /* 210px of height + 40px of border*/
  border: 40px solid #BC15DB;
  border-bottom: 0;
  margin-top: 40px;
  margin-left: 40px;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
  animation-delay: 0.5s;
}
 

Opgave 2 – Del 4

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for rainbow1-blue:

  • Gå ned i dit CSS og lav din klasse til rainbow1-blue.
.rainbow1-blue {
  position: absolute;
  width: 340px;
  height: 170px; /* as the half of the width */ 
  border-top-left-radius: 210px; /* 170px of height + 40px of border*/
  border-top-right-radius: 210px; /* 170px of height + 40px of border*/
  border: 40px solid lightblue;
  border-bottom: 0;
  margin-top: 80px;
  margin-left: 80px;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
  animation-delay: 1s;
}
 

Opgave 2 – Del 5

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for rainbow1-green:

  • Gå ned i dit CSS og lav din klasse til rainbow1-green.
.rainbow1-green {
  position: absolute;
  width: 260px;
  height: 130px; /* as the half of the width */ 
  border-top-left-radius: 170px; /* 130px of height + 40px of border*/
  border-top-right-radius: 170px; /* 130px of height + 40px of border*/
  border: 40px solid #21FF5C;
  border-bottom: 0;
  margin-top: 120px;
  margin-left: 120px;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
  animation-delay: 1.5s;
}
 

Opgave 2 – Del 6

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for rainbow1-yellow:

  • Gå ned i dit CSS og lav din klasse til rainbow1-yellow.
.rainbow1-yellow {
  position: absolute;
  width: 180px;
  height: 90px; /* as the half of the width */ 
  border-top-left-radius: 130px; /* 90px of height + 40px of border*/
  border-top-right-radius: 130px; /* 90px of height + 40px of border*/
  border: 40px solid yellow;
  border-bottom: 0;
  margin-top: 160px;
  margin-left: 160px;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
  animation-delay: 2s;
}
 

Opgave 2 – Del 7

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for rainbow1-orange:

  • Gå ned i dit CSS og lav din klasse til rainbow1-orange.
.rainbow1-orange {
  position: absolute;
  width: 100px;
  height: 50px; /* as the half of the width */ 
  border-top-left-radius: 90px; /* 50px of height + 40px of border*/
  border-top-right-radius: 90px; /* 50px of height + 40px of border*/
  border: 40px solid orange;
  border-bottom: 0;
  margin-top: 200px;
  margin-left: 200px;
  transform-origin: center bottom;
  transform: rotate(180deg);
  animation: runRainbow 10s linear infinite;
  animation-delay: 2.5s;
}
 

Opgave 2 – Del 8

I den allersidste del, skal vi nu skrive vores @keyframes ind. Denne har vi både peget på i animation: runRainbow 10s linear infinite. Men vi har også sørget for at alle farverne efter magenta har en forsinkelse på der øges fra bue til bue med 0.5s helt op til 2.5s ved den orange bue.

@keyframes runRainbow{
  25% {transform: rotate(360deg);}
  50% {transform: rotate(360deg);}
  75% {transform: rotate(180deg);}
  100% {transform: rotate(180deg);}
}
   
     

Her under vises/eksekveres koden