Rağmen bir sayfaya hareketli kar koyister bizden ister bir müşteriden, kulağa her şeyden daha eski bir tasarım uygulaması gibi geliyor, gerçek şu ki animasyon bu vesileyle sunduğumuz zarif denizdir. Ayrıca JavaScript'e ihtiyacınız yok, çok basit CSS3.
İlk şey bir göz atmaktır. animasyon.
Oldukça iyi görünüyor, değil mi? Bunu uygulamaya koymak için, yalnızca beyaz noktalı üç resim oluşturmamız ve özelliği kullanarak bunları canlandırmamız gerekiyor. @ana kareler CSS3'ün aşağıdaki gibi:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Farklı ekleniyor farklı tarayıcılar için önekler, sonra vücudumuz için kurulum:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Ayrıca gerekli önekleri ekleyerek. Joshua Johnson'ın izniyle ayrıntılı açıklamalarla birlikte prosedürün tamamı blogunda bulunabilir.
Daha fazla bilgi - CSS3 Gradient Generator, CSS3 Gradient Generator
Kaynak - Tasarım Shack