Geanimeerde sneeu met CSS

Geanimeerde sneeu met CSS3

Alhoewel sit geanimeerde sneeu op 'n bladsyOf van ons of van 'n kliënt, dit klink na 'n ontwerppraktyk wat ouer is as enigiets anders, die waarheid is dat die animasie wat ons by hierdie geleentheid aanbied, is die see van elegante. U het ook nie JavaScript nodig nie, dit is eenvoudig CSS3.

Die eerste ding is om na te kyk die animasie.

Lyk redelik goed, of hoe? Om dit prakties te maak, hoef ons net drie beelde met wit kolletjies te skep en dit met behulp van die eiendom te animasie @sleutelrame van CSS3 soos volg:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Voeg die verskillende by voorvoegsels vir verskillende blaaiersom dan vir ons liggaam te vestig:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

Voeg ook die nodige voorvoegsels by. Die volledige prosedure met gedetailleerde verduidelikings, met vergunning van Joshua Johnson, kan op sy blog gevind word.

Meer inligting - CSS3 Gradient Generator, CSS3 Gradient Generator
Bron - Ontwerp Shack


Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.