Salju animasi dengan CSS

Animasi salju dengan CSS3

Meskipun letakkan animasi salju di halamanBaik dari kami atau dari klien, kedengarannya seperti praktik desain lebih tua dari apa pun, kenyataannya adalah bahwa animasi yang kami sajikan pada kesempatan kali ini adalah lautan anggun. Anda juga tidak membutuhkan JavaScript, itu sederhana CSS3.

Hal pertama yang harus dilihat animasi.

Terlihat cukup bagus, bukan? Untuk mempraktikkannya kita hanya perlu membuat tiga gambar dengan titik putih dan menganimasikannya menggunakan properti @kartun dari CSS3 sebagai berikut:

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

Menambahkan yang berbeda prefiks untuk browser yang berbeda, lalu menetapkan untuk tubuh kita:

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

Juga menambahkan prefiks yang diperlukan. Prosedur lengkap dengan penjelasan rinci, atas izin Joshua Johnson, dapat ditemukan di blognya.

Informasi lebih lanjut - Generator Gradien CSS3, Generator Gradien CSS3
Sumber - Desain Gubuk


tinggalkan Komentar Anda

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai dengan *

*

*

  1. Penanggung jawab data: Miguel Ángel Gatón
  2. Tujuan data: Mengontrol SPAM, manajemen komentar.
  3. Legitimasi: Persetujuan Anda
  4. Komunikasi data: Data tidak akan dikomunikasikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Basis data dihosting oleh Occentus Networks (UE)
  6. Hak: Anda dapat membatasi, memulihkan, dan menghapus informasi Anda kapan saja.