OPGAVER TIL HTML & CSS – ANIMATION – BONUS 6
Opgave 6
Opgave 6 – Del 1
- Lav en ny pen i codepen.io
- Start med at lave 1 div boks således:
Opgave 6 – Del 2
Nu skal vi ned i CSS’en og lave styling på body og de div boksen detHele.
body {
background-color: black;
}
.detHele {
margin-left: 20%;
margin-top: 5%;
border-radius: 50%;
border: 2px solid white;
height: 450px;
width: 450px;
padding-right: 50px;
cursor: pointer;
box-shadow: -3px -5px 80px 30px green;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
Læg mærke til at vi benytter en -webkit-box-reflect. Denne skal vi bruge for at reflektere vores cirkel nedenunder sig selv(below)
Opgave 6 – Del 3
Nu skal vi lave vores animation af skyggen/gløden på cirklen.
.detHele:hover {
animation: rainbow1 10s infinite linear;
}
@keyframes rainbow1 {
0% {box-shadow: -3px -5px 80px 30px green;}
20% {box-shadow: -3px -5px 80px 30px yellow;}
40% {box-shadow: -3px -5px 80px 30px orange;}
60% {box-shadow: -3px -5px 80px 30px red;}
80% {box-shadow: -3px -5px 80px 30px purple;}
95% {box-shadow: -3px -5px 80px 30px blue;}
100% {box-shadow: -3px -5px 80px 30px green;}
}
Vi vil gerne at når man holder musen over(hover) så skifter det farve.
Opgave 6 – Del 4
Nu skal vi lave klassen for vores knap (HOVER ME), som skal blive usynlig, når vi holder musen over den store cirkel.
.hover1 {
position: absolute;
margin-left: 100px;
margin-top: 200px;
font-size: 40px;
font-family: verdana;
color: black;
background-color: white;
height: 50px;
width: 300px;
text-align: center;
border-radius: 50px;
}
.detHele:hover > .hover1 {
opacity: 0;
}
Ved at bruge > kan vi sige at når vi rører ved den store cirkel(detHele) så skal den indeni(>) animere den div der heder hover1
Opgave 6 – Del 5
Nu skal vi så style prikkerne i CSS’en, som vokser inde i cirklen
Inde i url(” “), genbruger vi linket fra sneopgaven:
https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif
Opgave 6 – Del 6
Vi fortsætter med at style cirklerne som drejer rundt inde i den store cirkel. Der er 6 cirkler, følg vejledningerne på billederne.
Dertil er animationerne forskellige.
Opgave 6 – Del 7
Nu skal vi til at style ovalerne vi starter med oval1 og dens animation.
.detHele:hover > .oval1 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(60deg);
animation: stretch1 2s infinite linear;
}
@keyframes stretch1 {
0% {
margin-left: 275px; margin-top: 175px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 375px; margin-top: 0px;
height: 300px; width: 50px;
opacity: 1; border: 2px solid orange;
}
100% {
margin-left: 375px; margin-top: 0px;
height: 300px; width: 50px;
opacity: 0;
}
}
Opgave 6 – Del 8
Nu skal vi til at style oval2 og dens animation.
.detHele:hover > .oval2 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(135deg);
animation: stretch2 2s infinite linear;
}
@keyframes stretch2 {
0% {
margin-left: 250px; margin-top: 225px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 350px; margin-top: 200px;
height: 300px; width: 50px;
opacity: 1; border: 2px solid orange;
}
100% {
margin-left: 350px; margin-top: 200px;
height: 300px; width: 50px;
opacity: 0;
}
}
Opgave 6 – Del 9
Nu skal vi til at style oval3 og dens animation.
.detHele:hover > .oval3 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(180deg);
animation: stretch3 2s infinite linear;
}
@keyframes stretch3 {
0% {
margin-left: 225px; margin-top: 275px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 225px; margin-top: 250px;
height: 300px; width: 50px;
opacity: 1; border: 2px solid orange;
}
100% {
margin-left: 225px; margin-top: 250px;
height: 300px; width: 50px;
opacity: 0;
}
}
Opgave 6 – Del 10
Nu skal vi til at style oval4 og dens animation.
.detHele:hover > .oval4 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(225deg);
animation: stretch4 2s infinite linear;
}
@keyframes stretch4 {
0% {
margin-left: 200px; margin-top: 225px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 100px; margin-top: 200px;
height: 300px; width: 50px;
opacity: 1; border: 2px solid orange;
}
100% {
margin-left: 100px; margin-top: 200px;
height: 300px; width: 50px;
opacity: 0;
}
}
Opgave 6 – Del 11
Nu skal vi til at style oval5 og dens animation.
.detHele:hover > .oval5 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(300deg);
animation: stretch5 2s infinite linear;
}
@keyframes stretch5 {
0% {
margin-left: 190px; margin-top: 175px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 80px; margin-top: 0px;
height: 300px; width: 50px;
opacity: 1;
}
100% {
margin-left: 80px; margin-top: 0px;
height: 300px; width: 50px;
opacity: 0; border: 2px solid orange;
}
}
Opgave 6 – Del 12
Nu skal vi til at style den sidste oval, oval6 og dens animation.
.detHele:hover > .oval6 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 175px;
transform: rotate(180deg);
animation: stretch6 2s infinite linear;
}
@keyframes stretch6 {
0% {
margin-left: 225px; margin-top: 125px;
height: 50px; width: 50;
border: 2px solid green;
}
80% {
margin-left: 225px; margin-top: -75px;
height: 300px; width: 50px;
opacity: 1; border: 2px solid orange;
}
100% {
margin-left: 225px; margin-top: -75px;
height: 300px; width: 50px;
opacity: 0;
}
}
Opgave 6 – Del 13
Nu skal vi til at style det allersidste, nemlig knoppen i midten og dens animation.
.detHele:hover > .midt1 {
position: absolute;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 50%;
margin-left: 225px;
margin-top: 210px;
background-color: white;
box-shadow: -3px -5px 50px 15px pink;
animation: bloom1 2s infinite linear;
}
@keyframes bloom1 {
from {
margin-left: 225px; margin-top: 200px;
transform: scale(0%,0%)
}
to {
margin-left: 225px; margin-top: 210px;
transform: scale(100%,100%)
}
}