Bagaman maglagay ng animated snow sa isang pahina, mula man sa amin o mula sa isang kliyente, parang isang mas sinaunang kasanayan sa disenyo kaysa sa anupaman, ang totoo ay ang animation na ipinakita namin sa okasyong ito ay ang dagat ng matikas. Gayundin hindi mo kailangan ang JavaScript, simple lang ito CSS3.
Ang unang bagay ay upang tingnan ang animasyon.
Mukhang medyo maganda, tama? Upang maisagawa ito, kailangan lamang naming lumikha ng tatlong mga imahe na may puting mga tuldok at buhayin ang mga ito gamit ang pag-aari @keyframes ng CSS3 tulad ng sumusunod:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Pagdaragdag ng iba mga unlapi para sa iba't ibang mga browser, pagkatapos ay magtatag para sa aming katawan:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Pagdaragdag din ng kinakailangang mga unlapi Ang buong pamamaraan na may detalyadong mga paliwanag, sa kabutihang loob ni Joshua Johnson, ay matatagpuan sa kanyang blog.
Karagdagang informasiyon - CSS3 Gradient Generator, CSS3 Gradient Generator
Pinagmulan - Disenyo Shack