Efekty CSS #5 - Latające kulki

 

(c)withlovenathalie

Hej! Dzisiaj przychodzę do was z jedną z instrukcji zaproponowaną przez ankietę(która znajduję się w tekście przy nagłówku i można ją nadal wypełniać!!) Tak więc efekt jest taki, że w tle mamy takie kuleczki, które wzlatują w górę. Przychodzę więc, aby omówić jak jest to zrobione.

Zabierzmy się więc do omawiania efekty i instrukcji! Sama instrukcja składa się z div'u, @keyframes i wartości animation... Wprowadzenie do @keyframes i animation znajdziecie tutaj > klik.

Sam efekt wygląda tak:

I. Przechodzimy do tworzenia kulek.

Tworzymy div z id możecie go nazwać jakkolwiek chcecie - zależy od was. W środku tego diva tworzymy div ale z class, ten class nazywacie cos w stylu (np. tak jak ja) kulka-1, kulka1 - w sumie zależy to od was. Sam kod można wkleić np. na "początku" kodu html - zaraz pod znacznikiem body lub wrzucić do w gadżet html/javascript (< tego sposobu nie próbowałam, więc nie wiem jak zadziała).

<div id="kulki">
<div class="kulka-1"/>
<div class="kulka-2"/>
<div class="kulka-3"/>
<div class="kulka-4"/>
</div>

II. Poustawiaj kulki na ich miejsce

Tutaj po prostu bierzemy każdy pojedynczy class, czyli np. w moim przypadku kulka-1 i przypisujemy im wartości, jak chcemy, żeby wyglądały.

.kulka-1 {
position:absolute;
opacity:1;
bottom:0;
width:0px;
height:0px;
left:5em;
background: var(--kul);
border-radius:90px;
box-shadow: 0px 0px 10px var(--kul);
animation-name:kjeden; /*- nazwa animacji -*/
animation-duration: 15s; /*- długość animacji -*/
animation-iteration-count:infinite; /*- ilość powtórzeń animacji -*/   }

III. Dodajemy animację

Tutaj kłania się znajomość czegoś takiego jak @keyframes i animation w CSS. U góry macie zalinkowany post u mnie na blogu, z krótki wprowadzeniem właśnie do animacji.

@keyframes kjeden /*- < nazwa animacji -*/ { 
0% {
bottom:0px;
}
100% {
bottom: 70em;
left: 10em;
width:25px;
height:25px;
}
}

I taki kodzik dopisujemy do każdego div class. Należy przy tym zmienić następujące wartości:

- animation-name,

- animation-duration,

trzeba dodać też animation-delay przy następnych kulkach.

Przy kodzie @keyframes zmieniamy:

- nazwę animacji, 

- wartości: bottom, left.

Jak zawsze w razie pytań, zapraszam do zostawienia ich w komentarzach.

btw. Zapraszam również na bloga xvenom-codes > gdzie wstawiam różnego rodzaju snippety kodów, karty postaci, miniprofile, etc. ^^

                              

Animacja z bloga: https://nookofwolves.blogspot.com/

Autorka animacji: Rinnie Lasair