HTML & CSS

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

Opgave 4

Opgave 4 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen butterfly1
< div class=”butterfly1″ >< /div >
 
Nu skal du tilføje klassen for body og butterfly1 i din CSS.
body {
  background-color: #121212;
}
.butterfly1 {
  margin-left: 20%;
}

Opgave 4 – Del 2

Vi går op i HTML’en igen. Nu skal vi lave 2 div bokse(børn) i butterfly1, så det ser således ud:

 < div class=”butterfly1” >
   < div class=”butterfly-leftVings” >< /div >
  < div class=”butterfly-rightVings” >< /div >
< /div >

Disse skal rumme vingernes div bokse. VI gør dem klar til at blive animeret, men vi laver animationen senere.
  • Gå ned i dit CSS og lav dine klasser til butterfly-leftVings og butterfly-rightVings.
.butterfly-leftVings {
  position: absolute;
  height: 400px;
  width: 200px;
  animation: moving 5s linear infinite;
  transform-origin: right;
  margin-left: 0px;
}
.butterfly-rightVings {
  position: absolute;
  height: 400px;
  width: 200px;
  animation: moving 5s linear infinite;
  transform-origin: left;
  margin-left: 250px;
}

Opgave 4 – Del 3

Vi går op i HTML’en igen. Nu skal vi lave børnene til venstre(left) og højre(right) vingerne. De skal være indholdet af vingerne:

< div class=”butterfly1” >

 

   < div class=”butterfly-leftVings” >
      < div class=”butterfly-ving” id=”butterflyVing2″ >< /div >
    < div class=”butterfly-ving” id=”butterflyVing1″ >< /div>
  < /div >

   < div class=”butterfly-rightVings” >
      < div class=”butterfly-ving” id=”butterflyVing4″ >< /div >
    < div class=”butterfly-ving” id=”butterflyVing3″ >< /div >
  < /div >

< /div >
  • Gå ned i dit CSS og lav keyframen butterfly-ving og id’erne for butterflyVing1 til 4.
.butterfly-ving {
  position: absolute;
  height: 200px;
  width: 200px;
  background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 50%, 83%), hsl(var(--hue, 0), 50%, 50%));
}
#butterflyVing1 {
  margin-top: 50px;
  border-radius: 0px 150px 0px 150px;
}
#butterflyVing2 {
  margin-top: 225px;
  border-radius: 150px 0px 150px 0px;
}
#butterflyVing3 {
  margin-top: 50px;
  border-radius: 150px 0px 150px 0px;
}
#butterflyVing4 {
  margin-top: 225px;
  border-radius:  0px 150px 0px 150px;
}
 

Opgave 4 – Del 4

Vi går igen op i HTML’en. For nu skal vi lave cirklerne på vingerne. Tilføj derfor børn til div boksene butterfly-ving, med klassen “butterfly-middle”, så det ser således ud:

< div class=”butterfly1″ >

   < div class=”butterfly-leftVings” >
      < div class=”butterfly-ving” id=”butterflyVing2″ >
         < div class=”butterfly-middle” >< /div >
      < /div >

      < div class=”butterfly-ving” id=”butterflyVing1″ >
        < div class=”butterfly-middle” >< /div >
      < /div>
   < /div >

   < div class=”butterfly-rightVings” >
      < div class=”butterfly-ving” id=”butterflyVing4″ >
        < div class=”butterfly-middle” >< /div >
      < /div >

      < div class=”butterfly-ving” id=”butterflyVing3″ >
        < div class=”butterfly-middle” >< /div >
      < /div >
   < /div >

< /div >

  • Gå ned i dit CSS og lav klassen for butterfly-middle. 
.butterfly-middle {
  position: absolute;
  height: 100px;
  width: 100px;
  background-image: radial-gradient(circle at top, purple, magenta);
  border-radius: 50%;
  margin-left: 50px;
  margin-top: 50px;
}
 

Opgave 4 – Del 5

Vi går op i HTML’en for nu skal vi lave div bokse til kroppen. Stil dig på linjen FØR din sidste slut div( < /div > ) og tryk enter. Tilføj nu dette til din HTML:

  < div class=”butterfly-body” >
    < div class=”butterfly-sticks” id=”butterflyStickL” >< /div >
    < div class=”butterfly-sticks” id=”butterflyStickR” >< /div >
    < div class=”butterfly-tales” id=”butterflyTaleL” >< /div >
    < div class=”butterfly-tales” id=”butterflyTaleR” >< /div >
  < /div >

Din allersidste div boks skal være EFTER dette stykke kode.

  • Gå ned i din CSS og lav klassen for butterfly-body.
.butterfly-body {
  position: absolute;
  height: 275px;
  width: 50px;
  background-image: repeating-linear-gradient(black 2%, purple 2%, black 10%);
  border-radius: 50px;
  margin-left: 200px;
  margin-top: 100px;
}
 

Opgave 4 – Del 6

Vi bliver i CSS’en og laver nu klassen til butterfly-sticks(følehornene) og deres id’er for at sætte dem rigtigt:

  • Gå ned i dit CSS og lav klassen for butterfly-sticks og id’erne for den venstre og højre.
.butterfly-sticks {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 10px 5px 0 0 black inset; 
}
#butterflyStickL {
  margin-left: -65px;
  margin-top: -55px;
  transform: rotate(90deg);
}
#butterflyStickR {
  margin-left: 35px;
  margin-top: -55px;
  transform: rotate(40deg);
}
 

Opgave 4 – Del 7

Vi bliver i CSS’en. Nu skal vi lave stikkerne nederst på kroppen(halerne):

  • Gå ned i dit CSS og lav klasserne og tilsvarende id’er for halerne, så de sidder rigtigt.
.butterfly-tales {
  position: absolute;
  height: 50px;
  width: 5px;
	background-color: black;
  border-radius: 50px;
}
#butterflyTaleL {
  margin-left: 5px;
  margin-top: 260px;
}
#butterflyTaleR {
  margin-left: 40px;
  margin-top: 260px;
}
 

Opgave 4 – Del 8

Vi bliver i CSS’en. Her skal vi lave et keyframen til animationen på vingerne. Gå op EFTER klassen .butterfly-rightVings og tryk enter. Skriv bagefter keyframen ind:

  • Gå ned i dit CSS og lav keyframen for @keyframes moving.
@keyframes moving {
  0% {transform: rotateY(0deg)}
  10% {transform: rotateY(-45deg)}
  20% {transform: rotateY(0deg)}
  30% {transform: rotateY(-55deg)}
  40% {transform: rotateY(0deg)}
  50% {transform: rotateY(-25deg)}
  60% {transform: rotateY(0deg)}
  70% {transform: rotateY(-90deg)}
  80% {transform: rotateY(0deg)}
  90% {transform: rotateY(-55deg)}
  100% {transform: rotateY(0deg)}
}
 
   
     

Her under vises/eksekveres koden