Peralihan trengkas dengan berbilang sifat dalam CSS?-tutorial css-php.cn

Peralihan trengkas dengan berbilang sifat dalam CSS?

WBOY

Lepaskan： 2023-09-01 20:21:02

ke hadapan

975 orang telah melayarinya

CSS 中具有多个属性的过渡简写？

Kami boleh menambah peralihan kepada elemen HTML menggunakan CSS. Sebelum memulakan tutorial ini, mari kita fahami dahulu apa itu peralihan. Pada asasnya, peralihan adalah apabila elemen berubah dari satu keadaan ke keadaan yang lain. Sebagai contoh, kami menukar dimensi elemen apabila pengguna menuding di atasnya.

Dalam CSS, kami boleh menambah peralihan kepada elemen dalam dua cara. Yang pertama ialah menggunakan empat sifat "sifat peralihan", "tempoh peralihan", "fungsi pemasaan peralihan" dan "penangguhan peralihan" pada masa yang sama. Yang kedua ialah hanya menggunakan sifat CSS "peralihan".

Sifat "peralihan" CSS ialah singkatan untuk sifat CSS berikut.

Transition-property - Ia menentukan sifat CSS yang kita perlukan untuk menggunakan kesan peralihan. Jika kita perlu menggunakan transformasi pada semua sifat, kita boleh menggunakan "semua" sebagai nilai.
Tempoh peralihan - Jumlah tempoh kesan peralihan dalam beberapa saat.
Fungsi pemasaan-peralihan - Ia menentukan cara peralihan harus berlaku. Contoh fungsi pemasaan peralihan ialah "liner", "ease-in", "ease-out", "ease-in-out", dsb.
Transition-delay - Ini ialah jumlah masa selepas kesan peralihan bermula.

Tatabahasa

Pengguna boleh menggunakan trengkas peralihan dengan berbilang sifat CSS mengikut sintaks berikut.

element {
   transition: Property duration timing-function delay;
}

Salin selepas log masuk

Dalam sintaks di atas, nilai pertama ialah sifat peralihan, nilai kedua ialah tempoh peralihan, nilai ketiga ialah fungsi pemasaan dan nilai terakhir ialah kelewatan peralihan.

Contoh 1

Dalam contoh di bawah, kami mempunyai elemen div dengan dimensi 200 x 200 dan kami telah menambah kesan peralihan yang berlangsung selama 2 saat pada ketinggian elemen div. Di sini, kelewatan penukaran ialah 0.5 saat dan fungsi pemasaan ialah "kemudahan masuk".

Pengguna boleh mengarahkan tetikus di atas elemen div untuk melihat kesan peralihan. Kita boleh perhatikan bahawa ketinggian elemen div meningkat dengan lancar dan bukannya serta-merta.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 500px;
         height: 200px;
         background-color: red;
         color: white;
         font-size: 25px;
         transition: height 2s ease-in-out 0.5s;
      }
      .element:hover {
         height: 400px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
   <div class = "element">
      This div contains the texts.
      <p> Hover over this div and wait to see the changes </p>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, elemen div mempunyai jidar-kiri awal 2px. Apabila pengguna menuding pada elemen div, kami meningkatkan margin-kiri kepada 100px. Kami menambah kesan peralihan yang melengahkan 0.5 saat dan bertahan selama 2 saat pada sifat CSS jidar kiri unsur div.

Dalam output, tuding di atas elemen div dan ia akan mengalihkan 100px ke kanan dalam masa 2 saat.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s ease-in-out 0.5s;
      }
      .element:hover {
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the below div and wait to see the changes. </p>
   <div class = "element">
      This div contains the texts.
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami telah menambahkan kesan peralihan pada berbilang sifat CSS. Di sini, kami telah menambahkan kesan peralihan 2 saat untuk sifat CSS "margin-kiri", "tinggi", "lebar", "warna latar belakang", "warna" dan "saiz fon".

Dalam output, pengguna dapat melihat bahawa peralihan semua sifat CSS adalah lancar. Walau bagaimanapun, kita boleh menggunakan "semua" sebagai nilai "harta peralihan" untuk menambah peralihan kepada semua sifat.

<html>
<head>
   <style>
      /* adding transition effect on the element */
      .element {
         width: 200px;
         height: 200px;
         background-color: blue;
         color: white;
         font-size: 25px;
         margin-left: 2px;
         border-radius: 12px;
         transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
      }
      .element:hover {
         margin-left: 100px;
         height: 400px;
         width: 400px;
         background-color: aqua;
         color: black;
         font-size: 40px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
   <p> Hover over the bellow div to see the achennges</p>
   <div class = "element">
      Square div element.
   </div>
</body>
</html>

Salin selepas log masuk

Pengguna belajar menggunakan sifat CSS "peralihan", yang merupakan singkatan untuk berbilang sifat CSS yang berkaitan dengan peralihan. Di sini, kami telah belajar menggunakan sifat CSS "peralihan" dalam tiga contoh di atas. Dalam contoh sebelumnya, kami menambah kesan peralihan kepada berbilang sifat CSS.

Atas ialah kandungan terperinci Peralihan trengkas dengan berbilang sifat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!