<div class=”position1″></div>
Stil dig mellem de to div tags og tryk enter, således.
<div class=”position1″>
</div>
<div class="position1">
<div id="star1" class="box1"></div>
<div id="star2" class="box1 box2"></div>
<div id="star3" class="box1 box3"></div>
<div id="star4" class="box1 box4"></div>
<div id="star5" class="box1 box5"></div>
<div id="star6" class="box1 box6"></div>
<div id="star7" class="box1 box7"></div>
</div>
Nu skal vi lave klassen for placeringen af stjernen
.position1 { position: absolute; margin-top: ; margin-left: 15%; }
Nu skal vi lave klassen for det første stjerne
.box1 { position: absolute; opacity: 0; animation: grow1 5s infinite linear; } @keyframes grow1 { 0% { transform: scale(0%,0%) rotate(180deg); opacity: 0.5; } 70% { transform: scale(180%,180%); opacity: 0.7; } 100% { transform: scale(200%,200%); opacity: 0; } }
Du skal gå ned i CSS’en under .snow2 og skrive dette ind:
.box2 {
animation-delay: 0.5s;
animation: grow1 5.5s infinite linear;
}
.box3 {
animation-delay: 1s;
animation: grow1 6s infinite linear;
}
.box4 {
animation-delay: 1.5s;
animation: grow1 6.5s infinite linear;
}
.box5 {
animation-delay: 2s;
animation: grow1 7s infinite linear;
}
.box6 {
animation-delay: 2.5s;
animation: grow1 7.5s infinite linear;
}
.box7 {
animation-delay: 3s;
animation: grow1 8s infinite linear;
}
Nu skal vi lave id’en for det første stjerne som er grøn.
Sæt det nu ind under #star1:after, men ændre på tallet 1 til #star2 osv og der hvor der står en farve, skift farven for stjernen til gul:
#star2 { position: absolute; margin: 50px 0; display: block; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid yellow; /*lav den gul*/ border-left: 100px solid transparent; transform: rotate(35deg); } #star2:before { position: absolute; border-bottom: 80px solid yellow; /*lav den gul*/ border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; transform: rotate(-35deg); } #star2:after { position: absolute; display: block; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid yellow; /*lav den gul*/ border-left: 100px solid transparent; transform: rotate(-70deg); content: ''; }