Bora e animuar me CSS

Borë e animuar me CSS3

Megjithëse vendosni dëborë të animuar në një faqeqoftë nga ne apo nga një klient, tingëllon si një praktikë e dizajnit më e vjetër se çdo gjë tjetër, e vërteta është se gjallëri që prezantojmë me këtë rast është deti elegant. Gjithashtu nuk keni nevojë për JavaScript, është e thjeshtë CSS3.

Gjëja e parë është të hedhim një vështrim animacioni.

Duket mjaft mirë, apo jo? Për ta vënë atë në praktikë, ne vetëm duhet të krijojmë tre imazhe me pika të bardha dhe t'i animojmë ato duke përdorur pronën @ keyframes të CSS3 si më poshtë:

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

Shtimi i ndryshëm parashtesat për shfletues të ndryshëm, pastaj vendosni për trupin tonë:

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

Gjithashtu shtimi i parashtesave të nevojshme. Procedura e plotë me shpjegime të hollësishme, me mirësjelljen e Joshua Johnson, mund të gjendet në blogun e tij.

Më shumë informacion - CSS3 Gradient Generator, CSS3 Gradient Generator
Burimi - Projektimi i kasolleve


Lini komentin tuaj

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *

*

*

  1. Përgjegjës për të dhënat: Miguel Ángel Gatón
  2. Qëllimi i të dhënave: Kontrolloni SPAM, menaxhimin e komenteve.
  3. Legjitimimi: Pëlqimi juaj
  4. Komunikimi i të dhënave: Të dhënat nuk do t'u komunikohen palëve të treta përveç me detyrim ligjor.
  5. Ruajtja e të dhënave: Baza e të dhënave e organizuar nga Occentus Networks (BE)
  6. Të drejtat: Në çdo kohë mund të kufizoni, rikuperoni dhe fshini informacionin tuaj.