Kesan animasi salji menggunakan CSS-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Kesan animasi salji menggunakan CSS

王林

Sep 03, 2023 pm 11:25 PM

Kesan animasi salji menggunakan CSS

Kita boleh mencipta animasi menggunakan HTML dan CSS. Apabila kami menambah animasi pada halaman web, ia meningkatkan pengalaman pengguna aplikasi. Kita boleh mencipta pelbagai animasi menggunakan sifat CSS keyframes dan menggunakannya menggunakan sifat CSS "animasi".

Dalam tutorial ini, kita akan belajar menggunakan CSS untuk mencipta kesan animasi jatuh kepingan salji.

tatabahasa

Pengguna boleh mencipta kesan animasi salji menggunakan CSS mengikut sintaks berikut.

<div class = "snow"> </div>
.snow{
   animation: snow 7s linear infinite;
}
.snow:nth-child(2) {
   left: 20%;
   animation-delay: 1s;
}

Dalam sintaks di atas, kami mencipta elemen div dengan nama kelas "snow" dan menambah "snow" keyframes sebagai nilai animasi. Selain itu, kita boleh menetapkan kelewatan animasi dan kedudukan kiri untuk setiap div "salji" menggunakan sifat CSS anak ke-n.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh di bawah, kami telah mencipta berbilang elemen div dengan nama kelas "salji" dalam HTML. Dalam CSS, kami pada mulanya menetapkan lebar dan ketinggian tetap untuk elemen salji. Selain itu, kami menetapkan latar belakang dan kedudukan untuk setiap elemen salji.

Kami menambah animasi salji untuk menggerakkan elemen div dan mencipta kesan salji. Selain itu, kami memperibadikan setiap elemen salji dan menukar saiz, kelegapan dan kedudukan kiri setiap elemen salji.

Selain itu, kami menetapkan kelewatan animasi untuk setiap elemen kepingan salji. Oleh itu, kita dapat melihat elemen kepingan salji jatuh pada masa yang berbeza pada skrin.

<html>
<head>
   <style>
      * {background-color: darkblue; color: white;}
      /* add snowfall animation */
      .snow {
         position: absolute;
         top: -50px;
         left: -50px;
         width: 15px;
         height: 15px;
         border-radius: 50%;
         background: white;
         animation: snow 7s linear infinite;
      }
      .snow:nth-child(1) {
         left: 10%;
         opacity: 0.3;
         height: 10px;
         width: 10px;
         animation-delay: 0s;
      }
      .snow:nth-child(2) {
         left: 20%;
         opacity: 0.5;
         animation-delay: 1s;
      }
      .snow:nth-child(3) {
         left: 30%;
         height: 5px;
         width: 10px;
         animation-delay: 2s;
      }
      .snow:nth-child(4) {
         left: 40%;
         height: 8px;
         width: 13px;
         animation-delay: 1s;
      }
      .snow:nth-child(5) {
         left: 50%;
         opacity: 0.7;
         animation-delay: 4s;
      }
      .snow:nth-child(6) {
         left: 60%;
         opacity: 0.3;
         height: 20px;
         width: 13px;
         animation-delay: 8s;
      }
      .snow:nth-child(7) {
         left: 70%;
         opacity: 0.9;
         height: 17px;
         width: 10px;
         animation-delay: 6s;
      }
      .snow:nth-child(8) {
         left: 80%;
         opacity: 0.6;
         animation-delay: 7s;
      }
      .snow:nth-child(9) {
         left: 90%;
         height: 12px;
         width: 12px;
         animation-delay: 5s;
      }
      .snow:nth-child(10) {
         left: 80%;
         height: 22px;
         width: 16px;
         animation-delay: 9s;
      }
      @keyframes snow {
         0% {
            transform: translateX(0) translateY(0);
         }
         100% {
            transform: translateX(80px) translateY(1000px);
         }
      }
   </style>
</head>
<body>
   <h2 id="Adding-the-i-Snowfall-animation-i-using-HTML-and-CSS"> Adding the <i> Snowfall animation </i> using HTML and CSS. </h2>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
   <div class = "snow"> </div>
</body>
</html>

Terjemahan bahasa Cina bagi

Contoh 2

ialah:

Contoh 2

Dalam contoh di bawah, kami telah menggunakan perpustakaan 'Jquery-snowfall' untuk mencipta kesan salji menggunakan Jquery. Kami menambahkan perpustakaan pada bahagian

Dalam jQuery, kami memanggil kaedah Snowfall() untuk mencipta kesan snowfall. Selain itu, kami menghantar beberapa parameter kepada kaedah Snowfall().

Dalam output, pengguna boleh melihat kesan salji, yang lebih baik daripada contoh di atas.

<html>
<head>
   <style>
      * {
         color: blue;
      }
      .snow-fall {
         height: 600px;
         width: 600px;
         background-color: blue;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"> </script>
</head>
<body>
   <h2 id="Adding-the-i-Snowfall-animation-i-using-HTML-and-JQuery"> Adding the <i> Snowfall animation </i> using HTML and JQuery. </h2>
   <div class = "snow-fall"> </div>
   <script>
      $('.snow-fall').snowfall({ flakeCount: 500, maxSpeed: 2, maxSize: 10 });
   </script>
</body>
</html>

Pengguna mempelajari dua cara berbeza untuk mencipta kesan salji. Dalam kaedah pertama, kami hanya menggunakan HTML dan CSS. Pembangun dapat melihat bahawa kod itu sangat kompleks dan sukar dibaca kerana ia memerlukan mencipta setiap elemen salji dan memanipulasinya menggunakan CSS. Dalam pendekatan kedua, kami menggunakan perpustakaan pihak ketiga luaran untuk jQuery untuk mencipta kesan salji.

Atas ialah kandungan terperinci Kesan animasi salji menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AM

Ekosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,

Perisian CepatApr 17, 2025 am 11:49 AM

Terdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.

Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AM

Saya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,

Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AM

Animasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara

Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AM

Mungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...

API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AM

Dengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu

Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AM

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AM

Saya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.