OPGAVER TIL HTML & CSS – ANIMATION – BONUS – LOTUS
Opgave 4
Opgave 4 – Del 1
- Lav en ny pen i codepen.io
- Lav 1 div boks i din HTML del og giv den klassen “position1”
- Lav der efter 10 knapper inde i den div box
- Således her
<div class=”position1″>
<button></button>
<button></button>
<button></button>
</div>
Giv de 10 buttons en id der hedder id=”lotus1″ til id=”lotus 10″ og alle har en class der hedder class=”lotus0″.
- Således her
<div class=”position1″>
<button id=”lotus1″ class=”lotus0″></button>
<button id=”lotus2″ class=”lotus0″></button>
<button id=”lotus3″ class=”lotus0″></button>
</div>
Tilføj dette i din CSS box:
Opgave 4 – Del 2
Nu skal vi lave klar til at lave det første blad Lotus0 som faktisk er det blad alle bladene følger.
.lotus0 {
position: absolute;
margin-left: 0px;
margin-top: 0px;
height: 200px;
width: 200px;
border-radius: 100px 0px/100px 0px;
background-image: linear-gradient(magenta, white);
box-shadow: 2px 10px 5px purple inset,
-2px -2px 5px rgba(36,0,71,0.5);
transform: rotate(-45deg);
opacity: 0.8;
}
OBS: Lotus0 ligger med en vinkel på -45 grader
Opgave 4 – Del 3
Nu skal vi lave 2. klasse til alle lotus bladene, så følg med her:
Ved at lave 2 klasser kan vi justere på bladene både med deres ID og deres Klasser. Skriv således i din HTML box
Læg mærke til at der ligger en div der inde som skal styre navnet LOTUS
Opgave 4 – Del 4
Nu skal vi så til at sætte alle hover effekterne på
Dette er fordi den er den store i midten som ikke bevæger sig, krymper eller drejer.
Opgave 4 – Del 5
Så lang så godt. Nu skal vi til at lave CSS koden for de blade som krymper
Skriv koden ind for disse lotus klasser Lotus10, Lotus9, Lotus8
Opgave 4 – Del 6
I denne del skal vi lave klasserne for de blade der drejer til højre
Husk at der justeres ud fra at den oprindeligt allerede er drejet 45 grader
Dette er kun for Lotus4, Lotus5 og Lotus6
Lotus7 bevæger sig stadig ikke😉
Opgave 4 – Del 7
Vi er næsten ved at være der, nu mangler vi blot de blade som drejer til venstre
Lav nu denne kode i din CSS for Lotus1, Lotus2 og Lotus3
Opgave 4 – Del 8
Nu er vi nået til sidste del. Navnet LOTUS som skal programmeres i CSS’en
Læg mærke til at der er brugt hsl i koden, dette er i stedet for rgba. Man laver faktisk baggrunden og siger at den skal fylde teksten ud.
Følg billedet neden under
