Creați efectul căderii zăpezii pe o pagină Web folosind css3

Creați efectul căderii zăpezii pe o pagină web utilizând CSS3

Creați efectul căderii zăpezii pe o pagină Web folosind css3

Astăzi vom crea efectul căderii zăpezii numai cu CSS3, acest efect fiind perfect pentru crearea cardurilor de Anul Nou și de Crăciun. Crearea acestui efect vă va face doar câteva minute, deoarece pentru el vom folosi doar câteva imagini de fundal și animație CSS3.

Codul HTML va fi extrem de simplu:




Crăciun fericit și An Nou fericit!




În primul rând, vom crea un fundal pentru cartea noastră poștală, pentru aceasta puteți alege orice imagine frumoasă corespunzătoare subiectului. Și setați următoarele stiluri pentru corp astfel încât imaginea noastră să nu se înmulțească pe ecran:

corp # 123;
background-image. URL-ul # 40; 'Christmas.jpg' # 41; ;
fundal repeta. fără repetare;
background-attachment. fixe;
-webkit-background- dimensiune. acoperi;
-Dimensiunea Moz-background-. acoperi;
-o-background- dimensiune. acoperi;
-Dimensiunea ms-background-. acoperi;
dimensiunea de fundal. acoperi;
# 125;

Aici am folosit dimensiunea fundalului: cover. astfel încât fundalul nostru să fie redus cu păstrarea proporțiilor.

Pentru a crea o zăpadă care se încadrează, vom folosi următoarea idee. pentru aceasta luăm trei imagini cu fulgi de zăpadă, diferite dimensiuni și un fundal transparent. Puteți adăuga mai multe, dacă vă place, dar nu vom face un "viscol" aici și ne vom limita la trei. Fotografiile cu fulgi de zăpadă sunt pătrată imagini PNG, dimensiunea de 500, 400 și 300 de pixeli și, așa cum am spus, cu un fundal transparent. Fulgii de zăpadă pot fi vopsite în Photoshop sau Gimp folosind periile adecvate. Am folosit perii pentru perii Gimp GIMP Snowflake Brushes

Project-GimpBC. De asemenea, fulgii de zăpadă pot fi setați la o dimensiune diferită și diferite grade de estompare pentru a le face să pară mai naturale.

Aplicăm acum aceste imagini în blocul de împachetare (

). Setați-l la o înălțime de 100%, astfel încât ocupă întreaga suprafață a ferestrei, rețineți, de asemenea, să specificați aceeași înălțime pentru etichetele html și corp.

Utilizarea mai multor imagini de fundal, în funcție de sintaxă, nu diferă de utilizarea unui singur fundal, singura diferență fiind faptul că listați toate imaginile folosite ca fundal, separate prin virgule. Ca rezultat, obținem următoarele :.

html. corp # 123;
înălțime. 100%;
# 125;

div #wrapper # 123;
background-image. URL-ul # 40; 'Snowflake1.png' # 41;. URL-ul # 40; 'Snowflake3.png' # 41;. URL-ul # 40; 'Snowflake2.png' # 41; ;
înălțime. 100%;
# 125;

Pentru a crea animația, vom folosi @frame-cheie. Numele animației este, de exemplu, zăpada. Apoi, vom crea două cadre. În primul rând, aceasta este modul în care pagina noastră va arăta la începutul animației, al doilea este modul în care va arăta în cele din urmă. La început, am plasat toate imaginile de fundal în colțul din stânga sus al paginii, definind poziția de fundal egală cu "0px 0px". Apoi mutăm fiecare imagine în diferite locuri din pagină.

@ zăpadă cheie-cheie <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

Rețineți că pentru fiecare browser trebuie să înregistrați prefixul corespunzător. Ca rezultat, codul va arăta astfel:

@ zăpadă cheie-cheie <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -moz-keyframes zăpadă <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -webkit-keyframes zăpadă <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

@ -ms-keyframes zăpadă <
0% # 123; background-position. 0px 0px. 0px 0px. 0px 0px; # 125;
100% # 123; background-position. 500px 1000px. 400px 400px. 300px 300px; # 125;
# 125;

În pasul următor, setăm regulile pentru afișarea animației. Mai întâi specificăm numele animației pe care dorim să o folosim, în acest caz "zăpadă", apoi animația (20 secunde), apoi selectăm tipul de animație (liniar) și, în final, ciclul de animație - infinit.

div #wrapper # 123;
background-image. URL-ul # 40; 'Snowflake.png' # 41;. URL-ul # 40; 'Snowflake3.png' # 41;. URL-ul # 40; 'Snowflake2.png' # 41; ;
înălțime. 100%;
-webkit-animație. zăpadă 20s liniară infinită;
-Moz-animație. zăpadă 20s liniară infinită;
-ms-animație. zăpadă 20s liniară infinită;
animație. zăpadă 20s liniară infinită;
# 125;

Pentru inscripție, puteți folosi un font frumos, în acest exemplu am folosit fontul Lobster pe care l-am conectat la pagină folosind Fonturile Google Web.

Și asta am obținut ca rezultat:

Deci, avem o carte de Craciun frumos, dar, din pacate, va functiona doar in Firefox, Chrome si Safari. IE începe să suporte keyframes numai cu versiunea 10, Opera nu suportă în prezent această animație.

Pagina anterioară

Pagina următoare