HTML & CSS

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

Opgave 1

Opgave 1 – Del 1

Åben en ny PEN i CODEPEN.IO
Start med at lave den yderste div boks med klassen hexagon1

< div class=”hexagon1″ >< /div >

Nu skal du tilføje klassen for body i din CSS.

body {
background-color: #333333;
}

Opgave 1 – Del 2

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

< div class=”hexagon1” >
< div class=”hexagon1-bg” >< /div >
< div class=”hexagon2″ >< /div >
< /div >

Gå ned i dit CSS og lav din klasse til hexagon1.

.hexagon1 {
  margin-top: 100px;
  margin-left: 25%;
  position: absolute;
  height: 300px;
  width: 300px;
  transform: scale(100%,90%);
  background-color: black;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  
  /*mask gør at alt ud over højde og vidde på denne boks ikke vises*/
  -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%);
}

Opgave 1 – Del 3

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

Gå ned i dit CSS og lav din klasse til hexagon1-bg.

.hexagon1-bg {
  position: absolute;
  height: 400px;
  width: 400px;
  margin: -50px;
  background-image: linear-gradient(90deg, black 50%, magenta);
  /* background: conic-gradient(#000 30%,hsl(0 100% 70%) 90%,#000);*/
  animation: frame 2s ease-in-out infinite;
}

Opgave 1 – Del 4

Vi bliver i CSS’en. Vi skal nu lave keyframes til animationen “frame” vi lige har navngivet i hexagon1-bg:

Gå ned i dit CSS og lav din klasse til @keyframes frame.

@keyframes frame {
  to {
    rotate: 1turn;
    filter: hue-rotate(1turn);
  }
}

Vi beder den om at lave animationen en gang rundt(360deg) og rotere farveskalaen 1 gang igennem(360deg)

Opgave 1 – Del 5

Vi bliver i CSS’en og skal nu vi lave næste klasse, den for hexagon2, som ligge oven på hexagon1-bg og som barn inde i hexagon1.

Gå ned i dit CSS og lav din klasse til hexagon2.

.hexagon2 {
  position: absolute;
  height: 300px;
  width: 300px;
  transform: scale(80%,80%);
  background-color: #333333;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Ved at justere på procenterne(%) i transform: scale(); kan du gøre visningen af hexagon1-bg større, det der virker som rammen, bredere.