HTML & CSS

OPGAVE TIL HTML & CSS – ADVANCED – JUL 2

Opgave 2

Opgave 2 – Del 1

Først skal vi igennem disse trin for at skabe vores lotus blade

Lav en ny pen i codepen.io
Lav 1 div boks i din HTML del og giv den klassen “position1”
Således her
<div class=”position1″></div>

Stil dig mellem de to div tags og tryk enter, således.

Således her
<div class=”position1″>

</div>

Lav nu 7 div’er med disse klasser og id’er, således her:

<div class="position1">
  <div id="star1" class="box1"></div>
  <div id="star2" class="box1 box2"></div>
  <div id="star3" class="box1 box3"></div>
  <div id="star4" class="box1 box4"></div>
  <div id="star5" class="box1 box5"></div>
  <div id="star6" class="box1 box6"></div>
  <div id="star7" class="box1 box7"></div>
</div>

Opgave 2 – Del 3

Nu skal vi lave klassen for placeringen af stjernen

Nu skal du gå op i CSS’en. Kod .position1:

.position1 {
  position: absolute;
  margin-top: ;
  margin-left: 15%;
}

Opgave 2 – Del 4

Nu skal vi lave klassen for det første stjerne

Nu skal du gå op i CSS’en. Kod .box1 og dens animation:

.box1 {
  position: absolute;
  opacity: 0;
  animation: grow1 5s infinite linear;
}
@keyframes grow1 {
  0% {
    transform: scale(0%,0%) rotate(180deg); 
    opacity: 0.5;
  }
  70% {
    transform: scale(180%,180%);
    opacity: 0.7;
  }
  100% {
    transform: scale(200%,200%); opacity: 0;
  }
}

Opgave 2 – Del 5

I denne del skal vi klasserne .box2, .box3, box4, .box5, .box6 og .box7

Du skal gå ned i CSS’en under .snow2 og skrive dette ind:

.box2 {
  animation-delay: 0.5s;
  animation: grow1 5.5s infinite linear;
}
.box3 {
  animation-delay: 1s;
  animation: grow1 6s infinite linear;
}
.box4 {
  animation-delay: 1.5s;
  animation: grow1 6.5s infinite linear;
}
.box5 {
  animation-delay: 2s;
  animation: grow1 7s infinite linear;
}
.box6 {
  animation-delay: 2.5s;
  animation: grow1 7.5s infinite linear;
}
.box7 {
  animation-delay: 3s;
  animation: grow1 8s infinite linear;
}

Opgave 2 – Del 6

Nu skal vi lave id’en for det første stjerne som er grøn.

Nu skal du gå ned i CSS’en. Kod #star1, #star1:before og #star1:after

Opgave 2 – Del 7

I denne del skal vi kopiere id’en for #star1, #star1:before og #star1:after

Sæt det nu ind under #star1:after, men ændre på tallet 1 til #star2 osv og der hvor der står en farve, skift farven for stjernen til gul:

#star2 {
  position: absolute;
  margin: 50px 0;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid yellow; /*lav den gul*/
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star2:before {
  position: absolute;
  border-bottom: 80px solid yellow; /*lav den gul*/
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star2:after {
  position: absolute;
  display: block;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid yellow; /*lav den gul*/
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

Opgave 2 – Del 8

Gentag Opgave 2 Del 7, for hver stjerne og giv dem nye farver og id navne/tal

#star3, #star3:before og #star3:after – orange
#star4, #star4:before og #star4:after – red
#star5, #star5:before og #star5:after – magenta
#star6, #star6:before og #star6:after – purple
#star7, #star7:before og #star7:after – blue