Scurtă descriere


Site-ul artweber oferă resurse pentru PhotoShop cum ar fi psd-uri ( Bannere , Logo , Avatare , și coperte pentru Facebook , YouTube ) Iar pentru a-ți realiza propriile creații oferim resurse PhotoShop ( Font-uri , Gradient-uri , Wallpapere , Stil-uri și multe altele ) și pentru site-uri oferim diferite Script-uri , Index-uri.

811
Resurse
1455
Utilizatori
68
Comentarii
3
Ani online

Forumul ArtWeber Cerere Lucrare Inregistreaza-te Resurse Premium Cum să Downloadez
Meniu
5 Resurse întâmplătoare
    1279

    PSD - Logo Red..

    694

    Icons - Developer..

    255

    Fundaluri pentru..

    71

    STIL PENTRU..

    335

    RESURSE - VECTOR..

Tutoriale
    745

    Două tonuri Photoshop Tutorial

    502

    2 variante de buton Back to top

    743

    Cum se instaleaza noi Pensule in Photoshop

    1025

    Cum faci redirect HTTP la HTTPS

    957

    Cum se instaleaza noi stiluri in Photoshop

Iti place ceea ce facem
Da
Nu
Nu-ma intereseaza
Parteneri
Rețele sociale

Cine este conectat

1 vizitator pe site. dintre ei:
Oaspeți1
Lista utilizatorilor
Gregory A fost online 9 ore în urmă

Premium
Fii și tu mai deosebit

0

Zăpadă cu ajutorul CSS3 animație

Zăpadă cu ajutorul CSS3 animație



Zăpadă cu ajutorul CSS3 animație

Sunt multe scripturi de zăpadă, dar acesta are un plus forte mare
În primul rând acesta nu este un script, el nu folosește javascript sau JQuery,
Este făcut doar în CSS3, sunt 3 imagini în care 2 sunt blurate că să facă zăpada mai realistică

Instalare

În primul rând avem nevoie să găsim un spațiu unde să se vadă zăpada, este foarte bine să fie doar în header, banner.
De exemplu zăpada va fi în

<div class="artweber">
    aici
</div>


deci asta

<div class="artweber_snow">
<div id="snow"></div>
</div> 


trebuie de băgat ast felii

<div class="artweber">
    <div class="artweber_snow">
    <div id="snow"></div>
    </div> 
</div>


Acuma avem nevoie de css, îl adăugați intru-n css instalat pe site-ul tău

/* zapada */
.artweber_snow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
#snow {width: 100%; height: 100%; background-image: url("https://artimg.biz/i/0b59c1c3629d30622774a942454425ea.png"), url("https://artimg.biz/i/af341a1c0de0b512dd71a15e2aebca0a.png"), url("https://artimg.biz/i/19c3c02ca0c3b73a8ea225dae7bff749.png"); -webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
/* zapada */

Petru ca zăpada să fie în acel div care lai ales "la noi este artweber", în blocul ".artweber' din css-ul tău trebuie să scriți "position: relative", exemplu

.artweber {
    text-align: center;
    font-size: 15px;
    padding: 20px 0;
    background-image: url(https://artimg.biz/i/54185982f454f3170619907bdaf42752.png);
    font-weight: 500;
    margin-top: 10px;
    position: relative;
}


Dacă pe div-ul dat este un buton ceva care membrii trebuie să meargă pe el atunci adăugați asta

-webkit-pointer-events: none; 
pointer-events: none;


În

.artweber_snow
livedemo

Link direct:
BB-code link:
HTML link:

Taguri: Zăpadă, CSS3, animație
Stimate vizitator, esti pe site ca utilizator neînregistrat.
Vă recomandăm să vă Înregistrați.
informație
Ai vrea sa lasi un comentariu? Conectați-vă la contul dvs. pentru a lăsa comentarii. Nu ai cont? Aveți posibilitatea să creați un cont gratuit acum.