OPGAVER TIL HTML & CSS – ANIMATION – BONUS 5 – HIMMEL
Opgave 5
Opgave 5 – Del 1
- Lav en ny pen i codepen.io
- Lav nu en start div boks med en div boks inden i. I den inderste div boks skal der 16 div bokse i.
- Se billedet for vejledning
Opgave 5 – Del 2
Nu skal vi ned i CSS’en og lave styling på de 2 yderste div bokse. Følg vejledningen på billedet.
Det vi gør at at skabe en cirkel, hvor indholdet i den ikke overskrider kanten på denne cirkel.
Opgave 5 – Del 3
Nu fortsætter i CSS’en og laver nu animationen til himlen.
@keyframes night-1 {
0% {background: lightblue;}
10% {background: lightblue;}
40% {background: #030B40;}
60% {background: #030B40;}
90% {background: lightblue;}
100% {background: lightblue;}
}
Opgave 5 – Del 4
Nu skal vi lave klassen til stjernerne:
@stars-1 {
position: absolute;
margin-top: -200px;
margin-left: -200px;
height: 1000px;
width: 1000px;
border-radius: 50%;
background-image: url(“Her inde skal linket i bunden sættes ind”);
transform: scale(50%,50%);
animation: change-2 10s infinite linear;
}
Brug linket her, det er genbrugt fra sne opgaven:
https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif
Opgave 5 – Del 5
Nu skal vi så style solen og animere den, så den er væk når månen er fremme.
Opgave 5 – Del 6
Nu skal vi så style månen og animere den, så den er væk når solen er fremme.
Opgave 5 – Del 7
Vi er nået til sky klasserne og deres animation. Lav nu klassen for sky-1, sky-2 og sky-3
Den sidste sky klasse er lidt kortere, da den genbruger animationen fra sky-1
.sky-3 {
position: absolute;
animation: color-1 10s infinite linear;
border-radius: 50%;
background-image: radial-gradient(lightblue, #56C2FA, blue);
}
Opgave 5 – Del 8
Nu er vi nået til sidste del. nemlig at positionere skyerne enkeltvis i CSS’en
#sky-1 {
top: 200px;
margin-left: 0px;
}
#sky-2 {
top: 270px;
margin-left: 120px;
}
#sky-3 {
top: 250px;
margin-left: 0px;
}
#sky-4 {
top: 300px;
margin-left: 80px;
}
#sky-5 {
top: 300px;
margin-left: 180px;
}
#sky-6 {
top: 270px;
margin-left: 270px;
}
#sky-7 {
top: 200px;
margin-left: 360px;
}
#sky-8 {
top: 240px;
margin-left: 420px;
width: 100px;
height: 100px;
}
#sky-9 {
top: 280px;
margin-left: 320px;
width: 150px;
height: 150px;
}
#sky-10 {
top: 370px;
margin-left: 280px;
width: 100px;
height: 100px;
}
#sky-11 {
top: 330px;
margin-left: 20px;
width: 150px;
height: 150px;
}
#sky-12 {
top: 400px;
margin-left: 130px;
width: 100px;
height: 100px;
}
#sky-13 {
top: 400px;
margin-left: 220px;
width: 150px;
height: 150px;
}