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

Kesan animasi salji menggunakan CSS

王林

Lepaskan： 2023-09-03 23:25:06

ke hadapan

1226 orang telah melayarinya

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;
}

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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> 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>

Salin selepas log masuk

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!