Borra animata bis-CSS

Borra animata bis-CSS3

Għalkemm poġġi borra animata fuq paġna, kemm minna jew minn klijent, tinstema 'bħala prattika ta' disinn eqdem minn kull ħaġ'oħra, il-verità hija li l- animazzjoni li nippreżentaw f'din l-okkażjoni huwa l-baħar eleganti. Ukoll m'għandekx bżonn JavaScript, huwa sempliċi CSS3.

L-ewwel ħaġa hi li tagħti ħarsa lejn l-animazzjoni.

Jidher pjuttost tajjeb, hux? Biex nagħmluha fil-prattika, neħtieġu biss li noħolqu tliet immaġini b'tikek bojod u janimawhom bl-użu tal-proprjetà @ keyframes ta 'CSS3 kif ġej:

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

Żieda tal-differenti prefissi għal browsers differenti, imbagħad nistabbilixxu għal ġisimna:

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

Żid ukoll il-prefissi meħtieġa. Il-proċedura sħiħa bi spjegazzjonijiet dettaljati, korteżija ta 'Joshua Johnson, tista' tinstab fuq il-blog tiegħu.

Iktar informazzjoni - Ġeneratur tal-Gradjent CSS3, Ġeneratur tal-Gradjent CSS3
Sors - Shack Disinn


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

Kun l-ewwel li tikkummenta

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.