Walaupun letakkan salji animasi di halamansama ada dari kami atau dari pelanggan, sepertinya amalan reka bentuk lebih tua daripada yang lain, sebenarnya adalah bahawa animasi yang kami sajikan pada kesempatan ini adalah lautan yang elegan. Anda juga tidak memerlukan JavaScript, itu mudah CSS3.
Perkara pertama adalah melihat animasi.
Nampak cantik, bukan? Untuk mempraktikkannya, kita hanya perlu membuat tiga gambar dengan titik putih dan menghidupkannya menggunakan harta tanah @kunciframe CSS3 seperti berikut:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Menambah yang berbeza awalan untuk penyemak imbas yang berbeza, kemudian menetapkan untuk badan kita:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Juga menambah awalan yang diperlukan. Prosedur lengkap dengan penjelasan terperinci, milik Joshua Johnson, boleh didapati di blognya.
Maklumat lanjut - Penjana Gradien CSS3, Penjana Gradien CSS3
air pancut - Design Shack