HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – JUL 1

Opgave 1 - CSS og @keyframes

Opgave 1 – Del 1

Vi skal igennem disse punkter for opgaven JUL 1
  • Lav et nyt dokument(følg vejledningen i INTRO – OPGAVE 1 hvis du har glemt hvordan)
  • Lav 1 div boks i din body
  • Tildel den klassen .section. Således: < div class=”section” > < /dv >
  • Så skal du lave 2 div bokse INDE i den div boks
  • Giv hver af de 2 div bokse en klasse med hhv. snow1 i den ene og snow2 i den anden
Nu skal du gå op i CSS’en. Tilføj dette til .section:
.section{
  background: url(hvis du vil have et billede på);
  background-size: cover;
  width: 100%;
  height:650px;
  position: relative;
  overflow: hidden;
}

Opgave 1 – Del 2

Nu skal vi lave klassen for det første lag sne(.snow1)
Du kan låne mit billede til animationen:
https://mom2day.dk/wp-content/uploads/2020/12/snowflakeBG1GIF.gif

Ellers lav et selv 😉  
I str. 1200px og 750px HUSK at sætte ppi til 300px/inch snefnuggene må højst være 6px i str.

Nu skal du gå op i CSS’en. Kod .snow1:
.snow1{
     background: url(billed adresse);
     background-repeat: repeat;
     width: 100%;
     height: 650px;
     position: absolute;
     top: 0;
     left: 0;
     animation: animateOne 10s infinite linear;
     background-size: 600px;
    }

COPY-PASTE klassen og kald denne .snow2 

MEN! Ret baggrund str. til 1000px og skriv animateTwo i stedet.

Opgave 1 – Del 3

I denne del skal vi lave @keyframes for animateOne og animateTwo

Du skal gå op i CSS’en under .snow2 og skrive dette ind:

@keyframes animateOne{
      0%{
        background-position: 0px -100px
      }
      100%{
        background-position: 100px 650px
      }
    }
    @keyframes animateTwo{
      0%{
        background-position: 0px 100px
      }
      100%{
        background-position: 300px 650px
      }
    }

Her koder vi bevægelsen af vores billede lag 🙂

Opgave 1 – Del 4

Ekstra opgaver:
  1. Kod endnu et lag med sne i CSS’en – kald det .snow3
  2. Lav en div med klassen snow3 i. Sæt div’en efter den div med snow2 klassen. 
  3. Lav dertil en @keyframes animateThree i CSS’en
  4. Lav nu et billede af en by. 
  5. Kod en klasse .by1
  6. Lav en ny div før den div med klassen snow1 og skriv class=”by1″ i den 🙂 
Så skulle dine div’er gerne se således ud:

< div class=”section” >
    < div class=”by1″ > < /div >
    < div class=”snow1″ > < /div >
    < div class=”snow2″ > < /div >
    < div class=”snow3″ > < /div >
< /div >

 

Koden vises/eksekveres herunder