Bagaimana untuk mengikat animasi ke elemen pembahagian menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mengikat animasi ke elemen pembahagian menggunakan CSS?

PHPz

Lepaskan： 2023-09-05 15:05:15

ke hadapan

840 orang telah melayarinya

Bagaimana untuk mengikat animasi ke elemen pembahagian menggunakan CSS?

Elemen Bahagian, juga dikenali sebagai

, sering digunakan untuk mengumpulkan elemen HTML dan kemudian menggayakannya dengan menggunakan CSS. Animasi ialah elemen grafik dengan kesan visual untuk menjadikannya lebih menarik. Dalam HTML dan CSS, kami biasanya menamakan elemen ini

. Artikel ini akan menerangkan cara CSS mengikat animasi kepada elemen pembahagian.

Gunakan kaedah kerangka utama untuk menentukan animasi

Kaedah kerangka utama ialah cara paling biasa untuk mencipta kesan animasi dalam CSS.

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      width: 50vw;
      height: 10vh;
      background-color: rgb(103, 28, 141);
      animation: myAnimation 2s infinite alternate;
   }
   @keyframes myAnimation {
      0% {
         transform: translateX(0);
      }
      50% {
         transform: translateX(100px);
      }
      100% {
         transform: translateX(200px);
      }
   }
</style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Penjelasan

ialah:

Explain

Kod HTML menggunakan elemen pembahagian dengan kelas "bekas" untuk animasi. Animasi, yang ditakrifkan dalam peraturan @keyframes, mengalihkan elemen daripada 0 piksel ke kanan kepada 100 piksel, dan kemudian ke kanan hingga 200 piksel, dalam gelung berselang-seli.
Kod CSS mentakrifkan kelas "bekas" dengan lebar 50% daripada port pandangan, ketinggian 10% daripada port pandangan dan warna latar belakang ungu. Gunakan animasi pada elemen menggunakan sifat 'animasi' dengan nilai 'myAnimation 2s infinite selang-selang'. Elemen div terkandung dalam badan HTML dan animasi akan digunakan apabila dilihat dalam pelayar web.

Gunakan laluan keratan

Jika anda memahami contoh sebelum ini, anda pasti mendapati bahawa membuat animasi yang sangat kompleks adalah agak sukar kerana ia memerlukan kita menulis begitu banyak baris kod secara manual. Oleh itu, terdapat banyak alat lain yang boleh kita gunakan untuk mencapai kesan animasi yang hebat. Satu contoh sedemikian ialah menggunakan laluan keratan.

clip-path ialah sifat CSS yang membolehkan anda menentukan kawasan tertentu elemen untuk dipaparkan (dipotong) sambil menyembunyikan seluruh elemen.
Kita boleh menentukan kawasan melalui laluan keratan, yang boleh dibuat menggunakan bentuk asas seperti bulatan, segi empat tepat, poligon atau laluan SVG.

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100vh;
   }
   .container {
      background-color: rgb(220, 221, 158);
      width: 50vw;
      padding: 20px;
      text-align: justify;
      border-radius: 20px;
      clip-path: circle(23.2% at 100%);
   }
   .container:hover {
      clip-path: circle(141% at 100%);
      transition: 1s;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Hello world</h1>
      <p>This is the body of the text</p>
   </div>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Penjelasan

ialah:

Explain

Di sini, dokumen HTML menggunakan bekas fleksibel untuk memaparkan elemen kanak-kanak, berpusat secara mendatar dan menegak. Elemen badan mempunyai ketinggian 100vh dan kelas .container mempunyai topeng kliping bulat dan kesan peralihan hover.
Kelas .container mempunyai warna latar belakang, lebar, padding dan penjajaran teks, jejari sempadan 20px dan sifat laluan klip mencipta topeng bulat. Kelas pseudo hover menukar saiz laluan klip dengan kesan peralihan 1s.

Untuk meneroka topik ini dengan lebih lanjut, kami mengesyorkan anda membaca tutorial berikut untuk mengetahui lebih lanjut tentang topik -

https://www.tutorialspoint.com/css/css_clip.htm

KESIMPULAN

Dalam artikel ini, kami mempelajari cara mengikat animasi pada elemen div menggunakan CSS. Kami mempunyai pandangan eksklusif menggunakan kaedah kerangka utama untuk melakukan perkara yang sama. Kami boleh menyesuaikan sifat animasi seperti tempoh, kelewatan, tingkah laku, dsb.

Atas ialah kandungan terperinci Bagaimana untuk mengikat animasi ke elemen pembahagian menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!