Bagaimana untuk membuat berbilang peralihan pada satu elemen menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk membuat berbilang peralihan pada satu elemen menggunakan CSS?

王林

Lepaskan： 2023-08-26 13:37:02

ke hadapan

996 orang telah melayarinya

如何使用 CSS 在一个元素上创建多个过渡？

Mencipta berbilang peralihan pada elemen menggunakan CSS ialah cara terbaik untuk menambah minat dan interaktiviti pada tapak web anda. Dengan menggabungkan pelbagai peralihan, kami boleh mencipta pengalaman yang dinamik dan menarik untuk pengguna kami. Dalam artikel ini, kami akan membincangkan asas cara membuat berbilang peralihan pada elemen menggunakan CSS.

Cascading Style Sheets (CSS) ialah alat yang berkuasa untuk menggayakan halaman web. Salah satu ciri yang paling berguna ialah keupayaan untuk mencipta peralihan yang lancar dan menarik secara visual antara keadaan elemen yang berbeza, seperti apabila ia dilegar atau diklik.

Apakah perubahan CSS?

Sebelum kita belajar cara membuat berbilang peralihan, mari kita fahami dahulu apa itu peralihan CSS. Peralihan ialah perubahan beransur-ansur antara dua keadaan unsur. Sebagai contoh, apabila kita menuding pada butang, warna latar belakangnya berubah secara beransur-ansur dari satu warna ke warna yang lain. CSS membolehkan kami menentukan tempoh dan masa peralihan ini, serta sifat yang sedang diubah.

Tatabahasa

css-selector{
   transition: property duration timing-function delay;
}

Salin selepas log masuk

Sifat peralihan dalam CSS

Sifat peralihan yang boleh kami gunakan dalam CSS termasuk -

transition-property - Sifat ini menentukan sifat CSS yang harus diubah.
transition-duration - Sifat ini menentukan tempoh peralihan dalam saat atau milisaat. Secara lalai, tempoh peralihan ialah 0, yang bermaksud tiada kesan peralihan digunakan.
fungsi-masa-peralihan - Sifat ini mengawal kelajuan dan masa peralihan.
transition-delay - Sifat ini menentukan kelewatan sebelum peralihan bermula.

Buat transformasi asas

Untuk membuat peralihan, kita perlu menentukan sifat yang ingin dianimasikan, seperti tempoh peralihan, fungsi pemasaan dan sebarang kelewatan. Sebagai contoh, untuk membuat peralihan untuk lebar butang, untuk ini kita boleh menggunakan kod berikut -

button {
   transition: width 0.5s ease-in-out;
}

Salin selepas log masuk

Kod di atas menyatakan bahawa lebar butang akan beralih dalam tempoh 0.5 saat menggunakan fungsi pemasaan mudah masuk dan keluar.

Buat berbilang peralihan

Untuk membuat berbilang peralihan pada elemen, kami perlu menambah peralihan tambahan pada kod CSS. Sebagai contoh, untuk mencipta butang yang menukar kedua-dua sifat lebar dan warna latar belakang, untuk ini kita boleh menggunakan kod berikut -

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

Salin selepas log masuk

Kod di atas menyatakan bahawa sifat lebar dan warna latar belakang butang akan ditukar dalam tempoh 0.5 saat menggunakan fungsi pemasaan mudah masuk dan keluar.

Berikut ialah beberapa contoh kod lengkap tentang cara membuat berbilang peralihan pada elemen menggunakan CSS -

Contoh 1

Dalam contoh ini, kami akan mencipta butang dengan lebar togol dan sifat warna latar belakang. Walau bagaimanapun, kami akan menggunakan tempoh yang berbeza untuk setiap peralihan untuk mencipta kesan berperingkat.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menetapkan lebar 100px dan warna latar belakang hijau untuk butang. Kemudian, kami menetapkan sifat peralihan untuk mengalihkan sifat lebar dan warna latar belakang. Walau bagaimanapun, kami menggunakan tempoh 0.5 saat untuk peralihan lebar dan 1 saat untuk peralihan warna latar belakang. Ini mencipta kesan berperingkat di mana lebar butang beralih lebih cepat daripada warna latar belakang. Apabila tetikus berada di atas butang, lebar akan mengembang kepada 150px dan warna latar belakang akan bertukar kepada merah.

Contoh 2

Dalam contoh ini, kami akan mencipta kotak yang mengubah kedua-dua warna latar belakang dan sifat jejari sempadan. Walau bagaimanapun, kami akan menggunakan kelewatan untuk peralihan jejari sempadan.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menetapkan lebar dan tinggi kotak kepada 200px dan warna latar belakang kepada merah. Kemudian, kami menetapkan sifat peralihan untuk mengalihkan warna latar belakang dan sifat jejari sempadan. Walau bagaimanapun, kami menggunakan kelewatan 0.5 saat untuk peralihan jejari sempadan. Ini bermakna warna latar belakang akan beralih serta-merta, manakala jejari sempadan akan menunggu 0.5 saat sebelum beralih. Apabila tetikus melayang di atas kotak, warna latar belakang akan bertukar kepada biru dan jejari sempadan akan menjadi 0, mewujudkan segi empat sama.

Contoh 3

Di sini kami akan mencipta butang yang boleh mengubah sifat lebar dan warna. Walau bagaimanapun, kami akan menggunakan fungsi pemasaan yang berbeza untuk setiap peralihan untuk mencipta kesan unik.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menetapkan lebar butang kepada 120px, warna latar belakang kepada biru, dan kemudian menetapkan sifat peralihan untuk mengalihkan sifat lebar dan warna. Walau bagaimanapun, kami menggunakan fungsi pemasaan yang berbeza untuk setiap peralihan. Peralihan lebar menggunakan fungsi Bezier kubik tersuai. Apabila tetikus berada di atas butang, lebar mengembang kepada 180px dan warna teks berubah daripada merah kepada putih.

Kesimpulan

Peralihan CSS ialah alat yang berkuasa untuk mencipta kesan licin dan menarik secara visual pada halaman web. Dengan menggunakan sifat peralihan, kita boleh menentukan tempoh, fungsi pemasaan dan sifat yang sedang dialihkan. Kita juga boleh membuat berbilang peralihan pada elemen dengan menentukan berbilang sifat dalam atribut peralihan.

Atas ialah kandungan terperinci Bagaimana untuk membuat berbilang peralihan pada satu elemen menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!