HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – MIDDEL 3

Opgave 3

Opgave 3 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen shadow1Floor. Vi laver klassen til denne senere i opgaven
< div class=”shadow1Floor” >< /div >
 
Nu skal du tilføje klassen for body i din CSS.
body {
  background-color: #121212;
}

Opgave 3 – Del 2

Nu skal vi den næste div boks ind i HTML’en, så det ser således ud:

 < div class=”shadow1Floor” >< /div >
 < div class=”bowl1″ >< /div >

  • Gå ned i dit CSS og lav din klasse til bowl1.
.bowl1 {
  position: absolute;
  margin-left: 300px;
  margin-top: 100px;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-color: grey;
  animation: tip1 5s infinite linear;
}

Opgave 3 – Del 3

Vi bliver i CSS’en og skal nu vi lave keyframen til animationen på bowl1:

  • Gå ned i dit CSS og lav keyframen @keyframes tip1.
@keyframes tip1 {
  0% {transform: rotate(32deg)}
  50% {transform: rotate(-32deg)}
  100% {transform: rotate(32deg); filter: hue-rotate(360deg);}
}
 

Opgave 3 – Del 4

Vi bliver i CSS’en for nu skal vi prøve at arbejde med ::before og ::after:

  • Gå ned i dit CSS og lav afsnittene for ::before. Som er kolbens top kant.
.bowl1::before {
  position: absolute;
  content: '';
  top: -10px;
  left: 150px;
  height: 30px;
  width: 110px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 17px solid #D9D0D9;
  box-shadow: 0 15px #575357;
}
 

Opgave 3 – Del 5

Vi bliver i CSS’en for nu skal vi prøve at arbejde med ::before og ::after:

  • Gå ned i dit CSS og lav afsnittene for ::after. Som er kolbens top midte.
.bowl1::after {
  position: absolute;
  content: '';
  top: 80px;
  left: 150px;
  height: 60px;
  width: 150px;
  border-radius: 50%;
  transform: translateX(-50%);
  background-color: #D9D0D9;
  opacity: 0.3;
}
 

Opgave 3 – Del 6

Vi går op i HTML’en igen. Her skal vi lave et div barn til bowl1, så det ser således ud:

 < div class=”shadow1Floor” >< /div >
 < div class=”bowl1″ >
    < div class=”liquid1″ >< /div >
< /div >

  • Gå ned i dit CSS og lav klassen for liquid1.
.liquid1 {
  position: absolute;
  top: 50%;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: #1ae907;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
  filter: drop-shadow(0 0 80px #1ae907);
  transform-origin: top center;
  animation: animateLiquid 5s linear infinite;
}
 

Opgave 3 – Del 7

Vi bliver i CSS’en. Her skal vi lave et keyframen til animationen:

  • Gå ned i dit CSS og lav keyframen for @keyframes animateLiquid.
@keyframes animateLiquid{
  0% {transform: rotate(-22deg)}
  50% {transform: rotate(22deg)}
  100% {transform: rotate(-22deg)}
}
 

Opgave 3 – Del 8

Vi bliver i CSS’en. Her skal vi lave en ::before på væsken så den ser fyldig ud:

  • Gå ned i dit CSS og lav keyframen for liquid1::before.
.liquid1::before{
    content:'';
    position: absolute;
    top: -10px;
    width:100%;
    height:20px;
    background: #15be05;
    border-radius: 50%;
    filter: drop-shadow(0 0 80px #15be05);
}
 

Opgave 3 – Del 9

Vi går op i HTML’en igen. Her skal vi lave et div barn til til bowl1, så det ser således ud:

 < div class=”shadow1Floor” >< /div >
 < div class=”bowl1″ >
    < div class=”liquid1″ >< /div >
    < div class=”bowl1Shadow1″ >< /div >
< /div >

  • Gå ned i dit CSS og lav klassen for bowl1Shadow1.
.bowl1Shadow1 {
  position: absolute;
  top: 35px;
  left: 15px;
  height: 250px;
  width: 270px;
  border-radius: 50%;
  transform: translateX(-10deg) rotateY(20deg);
  filter: blur(20px);
  box-shadow: -5px -30px 20px -10px white inset;
  opacity: 0.5;
}
 

Opgave 3 – Del 10

Vi bliver i CSS’en. Her skal vi lave et klassen for skyggen til bowl1. Den vi lavede i HTML til at starte med, den allerførste div boks. Nemlig shadow1Floor:

  • Gå ned i dit CSS og lav klassen for shadow1Floor.
.shadow1Floor{
    position: absolute;
    top: 400px;
    left: 430px;
    transform: translate(-100px, -10px);
    width: 260px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border-radius:50%;
    animation: animteShadow 5s linear infinite;
}
 

Opgave 3 – Del 11

Nu skal vi lave keyframen til animationen i CSS’en:

  • Gå ned i dit CSS og lav din klasse til @keyframes animateShadow.
@keyframes animteShadow {
    0%{
        left:460px;
        width:260px;
        height:40px;
        top:405px;

    }
    25%{
        left:410px;
        width:265px;
        height:30px;
        top:402px;

    }
    50%{
        left:360px;
        width:260px;
        height:40px;
        top:405px;
    }
    75%{
        left:410px;
        top:402px;
        width: 265px;
        height:30px;
    }
  100%{
        left:460px;
        width:260px;
        height:40px;
        top:405px;
    }
}
   
     

Her under vises/eksekveres koden