CSS: @memulakan-gaya peraturan baru & hebat

Peraturan CSS @starting-style digunakan untuk mentakrifkan nilai permulaan untuk sifat yang ditetapkan pada elemen yang anda ingin alihkan daripada apabila elemen menerima kemas kini gaya pertamanya, iaitu apabila elemen pertama kali dipaparkan pada yang dimuatkan sebelum ini halaman.

Mari kita ambil mesej roti bakar sebagai contoh. Untuk memaparkannya kepada pengguna, kami akan menukar keterlihatannya, tetapi hasilnya ialah ia muncul serta-merta. Kini kita boleh menggunakan peraturan gaya @permulaan baharu untuk mentakrifkan animasi permulaan bagi elemen ini.

Beberapa contoh mudah

Mari kita gunakan HTML garis dasar ini, segi empat tepat yang ringkas:

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

Tambahkan peralihan warna latar belakang awal daripada biru kepada merah jambu

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

Tambahkan putaran pada contoh sebelumnya

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Apa pun, anda mendapat idea itu.
Animasikan pop timbul dan menu anda atau buat logo animasi,
Ianya mudah.

NOTA

Ciri ini mempunyai ketersediaan terhad pada masa ini.

Atas ialah kandungan terperinci CSS: @memulakan-gaya peraturan baru & hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!