OPGAVER TIL HTML & CSS – ANIMATION – BONUS 7 – BAMBUS URO
Opgave 7
Opgave 7 – Del 1
- Lav en ny pen i codepen.io
- Start med at lave 3 div bokse således:
Opgave 7 – Del 2
Nu skal vi ned i CSS’en og lave styling på body og de 3 div bokse.
body {
background-color: purple;
overflow: hidden;
}
#circle0 {
position: absolute;
margin-top: -400px;
height: 1000px;
width: 1000px;
border-radius:50%;
background-color: #9311B8;
}
#circle1 {
position: absolute;
margin-top: -300px;
margin-left: 100px;
height: 800px;
width: 800px;
border-radius:50%;
background-color: #A911ED;
}
#circle2 {
position: absolute;
margin-top: -200px;
margin-left: 200px;
height: 600px;
width: 600px;
border-radius:50%;
background-color: #A30EC7;
}
Opgave 7 – Del 3
Nu går vi op i HTML’en igen og laver opsætningen til vores bambus uro. Følg vejledningen på billedet.
Læg mærke til at du kan kopiere første sæt og derefter blot ændre på id navnene
Opgave 7 – Del 4
Nu skal vi lave klassen til windChime0:
.windChime0 {
margin-left: 350px;
margin-top: 300px;
}
Opgave 7 – Del 5
Nu skal vi så style tråden/thread i CSS’en
Opgave 7 – Del 6
Nu skal vi så style id’erne for thread0, thread1 og thread2 i CSS’en og deres animation
Opgave 7 – Del 7
Vi fortsætter med at style id’erne for thread3 og thread4 i CSS’en og deres animation
Opgave 7 – Del 8
Nu skal vi så style røret som hænger for enden af trådene.
Opgave 7 – Del 9
Nu mangler vi bare hullet til bambus røret.
Opgave 7 – Del 10
Nu er vi nået til toppen af bambus uroen – hatten.
Opgave 7 – Del 11
Vi bliver i CSS’en og laver animationen til hatten.
@keyframes vip {
0%{transform: rotate(2deg)}
20%{transform: rotate(-2deg)}
40%{transform: rotate(2deg)}
60%{transform: rotate(-2deg)}
80%{transform: rotate(2deg)}
90%{transform: rotate(-2deg)}
100%{transform: rotate(2deg)}
}
Opgave 7 – Del 12
Det eneste der mangler nu, er blot de sidste 2 div’er, nemlig ringen og snoren.
.ring {
position:absolute;
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px solid black;
margin-top: -330px;
margin-left: 125px;
}
.lock {
position: absolute;
height: 150px;
width: 2px;
background-color: black;
margin-left: 150px;
margin-top: -280px;
z-index: 10;
}