Nowa wersja bloga jest już aktywna.
LASAIR.PL
Serdecznie zapraszam!

intrukcje szablony loga do druku poradniki nadruki

» » Latające kule

Latające kule
Prosta instrukcja na latające kule, które można wykorzystać gdzie chcecie, w tle, w nagłówku. Jedynie html + css. demo
Krok 1. 
Wchodzimy w układ i dodajemy gadżet HTML/JS.

 <div id='kule'>
<div class='kula-1'/><div class='kula-2'/>
</div>

Krok 2.
Wchodzimy w css i dodajemy:

#kule {  width: 100%; bottom:0px; left:0px; }

.kula-1 { z-index: -2; width: 20px; height: 20px; position: absolute; left: 0; background: #c60322; border-radius: 90px; box-shadow: 0px 0px 10px #c60322;
animation-name: a; animation-duration: 15s; animation-iteration-count:infinite;
-webkit-animation-name: a; -webkit-animation-duration:10s; -webkit-animation-iteration-count:infinite; }

@keyframes a {0% { bottom: 0px; }100% { bottom: 120%; left: 10%; width: 10px; height: 10px;}}

.kula-2 { z-index: -2; width: 10px; height: 10px; position: absolute; left: 50%; background: #c60322; border-radius: 90px; box-shadow: 0px 0px 10px #c60322;
animation-name: b; animation-duration: 13s; animation-iteration-count: infinite;
-webkit-animation-name: b;-webkit-animation-duration: 13s; -webkit-animation-iteration-count: infinite; }
 
@keyframes b {0% { bottom: 0px; } 100% { bottom: 120%; left: 40%; width: 5px; height: 5px;}}

Krok 3.
Omówienie kodu.
 
By kule się poruszały, używamy do tego animacji.
@keyframes nazwaanimacji {
0% { kod css } /* początek animacji */
100% { kod css } /* koniec animacji */
}

selektor {
animation-name: nazwa animacji;
animation-duration: czas animacji;
animation-iteration-count: pętla animacji;
}

2 komentarze:

Subskrybuj: Komentarze do posta (Atom)