Animerad snö med CSS

Animerad snö med CSS3

Även sätt animerad snö på en sidaAntingen från oss eller från en klient, det låter som en designpraxis som är äldre än någonting annat, sanningen är att animering som vi presenterar vid detta tillfälle är havet av eleganta. Du behöver inte heller JavaScript, det är enkelt CSS3.

Det första är att ta en titt på animationen.

Ser ganska bra ut, eller hur? För att omsätta det i praktiken behöver vi bara skapa tre bilder med vita prickar och animera dem med hjälp av fastigheten @nyckelbilder av CSS3 enligt följande:

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

Lägg till olika prefix för olika webbläsare, sedan etablera för vår kropp:

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

Lägger också till nödvändiga prefix. Det fullständiga förfarandet med detaljerade förklaringar, med tillstånd av Joshua Johnson, finns på hans blogg.

Mer information - CSS3 Gradient Generator, CSS3 Gradient Generator
Källa - Design Shack


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

Bli först att kommentera

Lämna din kommentar

Din e-postadress kommer inte att publiceras.

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.