Komercyjnie
noskowicz.klaudia@gmail.com

lub

Potrzebujesz w czymś pomocy lub chcesz napisać w sprawie współpracy?
rinne.lasair@gmail.com

x

Rinne ☽ Lasair
Klaudia ☾ Noskowicz

20.11 Skorpion ♏ | Gryfon | 165cm | Optymista

❤ DGD ~ Koty ~ BDO ~ Kosmos ~ Burza ~ Anime
💔 Horrory ~ Spoilery

x

Responsywne szablony na witrynę blogspot, loga, grafika 3d, animacje oraz tutoriale.

Główna Portfolio Blog
O mnie
Kontakt
x
+

Co będzie?

  • Kawowa Mary zamówienie
  • Rise of Fayren zamówienie
  • Szablon Reaper darmówka
  • Szablon do opowiadań
  • Szablon rpg

Szukaj

x

Latające kule

Prosta instrukcja na latające kule, które można wykorzystać gdzie chcecie, w tle, w nagłówku. Jedynie html + css.

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:

by Rinne Lasair | credits: helplogger