OPGAVER TIL HTML & CSS – ANIMATION – BONUS 3
Opgave 3
Opgave 3 – Del 1
- Lav en ny pen i Codepen.io
- Lav en div’boks og giv den class= “mom”
- Lav nu endnu et søster til 1. div boks og giv den class= “sister”
Således her
< div class=”mom”>< /div>
< div class=”sister”>< /div>
Opgave 3 – Del 2
Nu skal vi så lave klasserne i CSS’en til mom og sister. Her skal der bruges et billede til stjernerne, linket kommer her:
.mom{ /*parent*/
height: 280px;
width: 280px;
background-color: black;
padding: 10px;
margin-left: 300px;
margin-top: 150px;
position: absolute;
}
.sister{ /*sibling*/
height: 600px;
width: 1000px;
background-color: red;
}
(Husk at alt der står i mellem /* herinde */ ikke vises)
Opgave 3 – Del 3
Nu skal vi så have sat alle børnene/children ind
< div id=”mom” class=”mom” >
< div id=”child1″ class=”child” >< /div >
< div id=”child2″ class=”child” >< /div >
< div id=”child3″ class=”child” >< /div >
< div id=”child4″ class=”child1″ >< /div >
< div id=”child5″ class=”child1″ >< /div >
< div id=”child6″ class=”child1″ >< /div >
< div id=”child7″ class=”child2″ >< /div >
< div id=”child8″ class=”child2″ >< /div >
< div id=”child9″ class=”child2″ >< /div >
< /div >
< div id=”sister” class=”sister” >< /div >
Og alle børnene er selvfølgelig opdelt i rækker med en #id der giver barnet identifikations tallet og en class for at definere gruppe.
1. række har derfor id=1, 2, 3 – gruppe “child”
2. række har derfor id=4, 5, 6 – gruppe “child1”
3. række har derfor id=7, 8, 9 – gruppe “child2”
Opgave 3 – Del 4
Det næste nu er at definere alle børnene, ved hjælp af deres class/gruppe.
Det gør vi ved at lave en child og kopiere(ctrl+c) den og sætte ind neden under(ctrl+v) 2 gange, derefter justere vi i child1 og child2 så rækker ligger ved siden af hinanden med 3 bokse i hver.
Det ser således ud:
.child{ /*child*/
height: 80px;
width: 80px;
background-color: yellow;
position: absolute;
margin-left: 10px;
margin-top: 10px;
box-shadow: 5px 10px 20px black inset;
}
.child1{ /*child*/
height: 80px;
width: 80px;
background-color: yellow;
position: absolute;
margin-left: 100px;
margin-top: 10px;
box-shadow: 5px 10px 20px black inset;
}
.child2{ /*child*/
height: 80px;
width: 80px;
background-color: yellow;
position: absolute;
margin-left: 190px;
margin-top: 10px;
box-shadow: 5px 10px 20px black inset;
}
Opgave 3 – Del 5
I denne del skal vi kode alle 9 bokse med deres #id. Der er ikke meget men hver boks skal sidde forskelligt og bevæge sig forskelligt fra hinanden når vi holder musen over mor boksen.
#child1{ /*child*/
transform-origin: top left;
}
#child2{ /*child*/
position: absolute;
margin-top: 100px;
transform-origin: center left;
}
#child3{ /*child*/
position: absolute;
margin-top: 190px;
transform-origin: bottom left;
}
#child4{ /*child*/
position: absolute;
margin-top: 10px;
transform-origin: top center;
}
#child5{ /*child*/
position: absolute;
margin-top: 100px;
transform-origin: center;
}
#child6{ /*child*/
position: absolute;
margin-top: 190px;
transform-origin: bottom;
}
#child7{ /*child*/
position: absolute;
margin-top: 10px;
transform-origin: top right;
}
#child8{ /*child*/
position: absolute;
margin-top: 100px;
transform-origin: center right;
}
#child9{ /*child*/
position: absolute;
margin-top: 190px;
transform-origin: bottom right;
}
Bemærk at der benyttes # her for at definere at det er en id og ikke en klasse. Opgave 3 – Del 6
I denne del skal vi lave mouse over effekten for mor boksen. Altså når musen rører hende, så sker der noget med hende. Derfor skal der også laves en @keyframe til.
.mom:hover {
animation: extra2 5s infinite linear;
}
@keyframes extra2 {
0% {transform: scale(100%, 100%);}
50% {transform: scale(150%, 150%);}
100% {transform: scale(100%, 100%);}
}
Dette gør at mor boksen vokser med halv størrelse(100%+50%) og mindskes igen(ned til 100% igen).
Opgave 3 – Del 7
Nu skal vi så til at kode børnenes reaktion NÅR vi rammer boksen “mom”.
.mom:hover .child{ /*child reaktion*/
background-color: purple;
animation: extra 5s infinite linear;
}
.mom:hover .child1{ /*child reaktion*/
background-color: purple;
animation: extra 5s infinite linear;
}
.mom:hover .child2{ /*child reaktion*/
background-color: purple;
animation: extra 5s infinite linear;
}
Nu skal vi så lave @keyframes den ene der styrer alle 3 grupper. Så alle grupper bevæges når man holder musen over “mom”
@keyframes extra{
0% { transform: rotate(-360deg); background-color: orange; }
40% { background-color: red; }
60% { background-color: blue; }
100% { transform: rotate(360deg); background-color: purple; border-radius: 50%; }
}
Opgave 3 – Del 8
Nu skal sættes farver på boksen “sister” (den store røde kasse).
.mom:hover + .sister{ /*child reaktion*/
animation: extra1 5s infinite linear;
}
@keyframes extra1{
0% { background: #3e5afb; }
25% { background: #3e5; }
50% { background: yellow; }
75% { background: red; }
90% { background: purple; }
100% { background: blue; }
}
Når man holder musen over mor SÅ(+) sker der noget for søster boksen
Opgave 3 – Del 9
Nu til aller sidste del, nemlig at give det blå skær! Det gør vi ved at give en hover effekt på klasserne/grupperne.
Nede i CSS’en skal der så se sådan her ud:
.child:hover {
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.child1:hover {
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
.child2:hover {
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
Bemærk at der er en meget mere simpelt måde at med 1 linje på box-shadow
dette er for at lære at der kan benyttes flere. Men det kan være en ekstra opg