Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?

WBOY

Lepaskan： 2023-09-05 09:33:22

ke hadapan

1235 orang telah melayarinya

Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?

Meteor kelihatan sebagai tanda kemesraan yang berkelip-kelip yang dihasilkan oleh menggigil kecil ini ketika ia berkelip-kelip merentasi langit malam yang sejuk. Kesan bintang jatuh ialah salah satu kesan latar belakang yang paling unik untuk tapak web tema gelap. Animasi bintang jatuh ialah contoh hebat skrin pemuatan yang boleh menarik perhatian anda untuk masa yang lama manakala bahan lain di tapak web dimuatkan. Kesan ini boleh dieksploitasi dalam pemuat halaman dan antara muka pengguna.

Dalam artikel ini, kita akan membincangkan cara untuk mencipta kesan animasi bintang jatuh menggunakan CSS. Untuk ini, kami akan menggunakan pelbagai sifat CSS seperti animasi, limpahan, penapis, transformasi, sifat anak ke-1, :sebelum dan :selepas pseudo-selectors.

Langkah untuk diikuti

Berikut ialah langkah-langkah untuk mencipta kesan animasi bintang jatuh -

Langkah 1 - Buat reka bentuk asas bintang menggunakan HTML. Buat elemen bahagian untuk langit dan sembilan

elemen untuk bintang.

Langkah 2 - Untuk membuat bintang jatuh pada 45 darjah, gunakan sifat Transform bagi elemen Bahagian.

Langkah 3 - Selaraskan elemen p mengikut keperluan anda.

Langkah 4 - Buat bola berbentuk donat menggunakan sifat-sifat seperti kedudukan dan sifat isi. Untuk memberi mereka bentuk bulat, gunakan sifat jejari sempadan.

Langkah 5 - Gunakan :sebelum dan :selepas pseudo-pemilih untuk menentukan kesan sebelum dan selepas bagi bintang

Langkah 6 - Gunakan sub-sifat ke-n untuk menambahkan animasi pada bintang. Menentukan kedudukan setiap anak ke-1.

Langkah 7 - Menggunakan @keyframes, nyatakan lebar kepala dan ekor bintang. Gunakan @-webkit-keyframes untuk mencipta kesan penangkapan.

Atribut yang digunakan

Kami menggunakan sifat CSS berikut -

:pemilih ke-anak(n)

:nth-child(n) ialah pemilih kelas pseudo CSS yang digunakan untuk memadankan elemen berdasarkan kedudukan mereka dalam kumpulan adik-beradik. Ia sepadan dengan semua elemen elemen anak ke-n. n boleh jadi nombor, kata kunci atau apa-apa formula.

Tatabahasa

element :nth-child(n){
   Css declarations;
}

Salin selepas log masuk

Parameter "n" dalam kurungan menunjukkan corak pemilihan atau pemadanan elemen. Ia mungkin tanda fungsi genap atau ganjil.

Nilai ganjil mewakili item dengan kedudukan ganjil dalam siri, seperti 1, 3, 5, dsb. Begitu juga, nilai genap mewakili item dengan nombor genap dalam siri, seperti 2, 4, 6, dan seterusnya.

Animasi CSS

Sifat animasi CSS membolehkan kami menukar pelbagai sifat gaya sesuatu elemen dalam selang masa tertentu, sekali gus memberikannya kesan animasi.

@keyframes digunakan untuk menentukan dengan tepat apa yang berlaku dalam animasi untuk tempoh tertentu. Ini dilakukan dengan mengisytiharkan sifat CSS untuk "bingkai" tertentu semasa animasi, dengan peratusan antara 0% (permulaan animasi) hingga 100% (akhir animasi).

Sifat penapis

Ia membolehkan pembangun menambahkan kesan visual seperti kelegapan, kabur dan ketepuan pada elemen HTML.

Tatabahasa

filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();

Salin selepas log masuk

Latar Belakang - Ia membolehkan kami menambah kesan visual pada elemen HTML di latar belakang.

Box-shadow - Ia membolehkan kami menambah bayang pada elemen HTML.

Transform - Sifat ini membolehkan kami menambah transformasi 2D atau 3D pada elemen. Ia membolehkan anda mengubah, memutar, menskala, bergerak, condong, dsb.

Contoh

<!DOCTYPE html>
<html>
<head>
   <title> Shooting Star Animation Effect </title>
   <style>
      *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      body{
         overflow: hidden;
      }
      div{
         position: absolute;
         top: 0;
         left: 0;
         background: #000;
         background-position-x: center;
         background-size: cover;
         width: 100%;
         height: 100vh;
         animation: background 68s linear infinite;
      }
      @keyframes background {
         0%{ transform:scale(1);}
         55%{ transform:scale(1.3);}
         100%{ transform: scale(1);}
      }
      span{
         position: absolute;
         left: 50%;
         top: 45%;
         width: 5px;
         height: 5px;
         background: white;
         border-radius: 50%;
         box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
         animation: anim 3s ease-in-out infinite;
      }
      span::before{
         content: '';
         width: 290px;
         height: 2px;
         position: absolute;
         top: 53%;
         transform: translateY(-45%);
         background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
      }
      @keyframes anim {
         0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
         40%{ opacity: 0.8; }
         70%{ opacity: 1; }
         100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
      }
      span:nth-child(1){
         top: 0;
         right: 0;
         left: inherit;
         animation-delay: 0 ;
         animation-duration: 1s;
      }
      span:nth-child(2){
         top: 0;
         right: 70px;
         left: inherit;
         animation-delay: 0.3s;
         animation-duration: 4s;
      }
      span:nth-child(3){
         top: 70px;
         right: 0px;
         left: inherit;
         animation-delay: 0.3s ;
         animation-duration: 3s;
      }
      span:nth-child(4){
         top: 0;
         right: 170px;
         left: initial;
         animation-delay: 0.7s;
         animation-duration: 3s;
      }
   </style>
</head>
<body>
   <div>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami belajar cara mencipta kesan bintang jatuh menggunakan CSS. Memandangkan reka bentuk web telah bertambah baik dengan ketara, animasi dalam talian ialah alat penting yang digunakan oleh pembangun laman web untuk menarik khalayak yang lebih besar. Kebanyakan orang cuba menggunakannya dengan lebih kerap, bukan sahaja untuk mengisi halaman tetapi untuk menunjukkan cara halaman itu harus dibaca. Animasi digunakan untuk menunjukkan ralat borang, lokasi klik, meningkatkan kadar penukaran dan banyak lagi.

Animasi sering menarik perhatian pengguna, itulah sebabnya ia digunakan. Selain itu, animasi boleh digunakan untuk mengalihkan perhatian pengguna semasa kandungan sedang dimuatkan, memberikan gambaran bahawa ia dimuatkan dengan lebih pantas dan membolehkan mereka memerhatikan pergerakan atau kemajuan dengan segera.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan animasi bintang menembak menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!