Contoh animasi FSCSS

Contoh ini menunjukkan teknik animasi ringkas menggunakan FSCSS. Mari kita bandingkan animasi CSS standard dengan pendekatan FSCSS.

Animasi CSS Standard:

HTML adalah mudah:

<code class="language-html"><h1></h1>
<div></div></code>

CSS menggunakan @keyframes untuk mentakrifkan animasi:

<code class="language-css">h1, div {
  animation: change 3s linear infinite;
}

@keyframes change {
  0% {
    background: red;
    width: 0;
    height: 0;
  }
  100% {
    background: #00f;
    width: 150px;
    height: 150px;
  }
}</code>

Ini mencipta animasi di mana kedua-dua elemen <h1> dan <div> beralih daripada segi empat sama merah bersaiz sifar kepada segi empat sama biru 150px.

Animasi FSCSS:

FSCSS menawarkan sintaks yang lebih padat. Berikut ialah persamaan FSCSS:

<code class="language-css">$(@keyframes h1, div &[3s linear infinite]) {
  0% {
    background: red;
    %2(width, height[: 0;])
  }
  100% {
    background: #00f;
    %2(width, height[: 150px;])
  }
}</code>

Sintaks $(...) merangkumkan pengisytiharan @keyframes, menerapkannya pada kedua-dua <h1> dan <div>. %2(width, height[: ...]) ialah singkatan untuk menetapkan kedua-dua sifat width dan height secara serentak.

Contoh CodePen:

Pautan CodePen yang disediakan (https://www.php.cn/link/dd32c0fc8172acd5312c1089a5aa4d33) secara visual menunjukkan kesan animasi. Ini membolehkan anda melihat animasi dalam tindakan dan membandingkan kepekatan kod FSCSS. Animasi menunjukkan peralihan yang lancar antara petak merah dan biru.

Atas ialah kandungan terperinci Contoh animasi FSCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!