FSCSS -Animationsbeispiel

Dieses Beispiel zeigt eine kurze Animationstechnik mit FSCSS. Vergleichen wir die Standard -CSS -Animation mit dem FSCSS -Ansatz.

Standard -CSS -Animation:

Die HTML ist einfach:

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

Das CSS verwendet @keyframes, um die Animation zu definieren:

<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>

Dies erstellt eine Animation, bei der sowohl der <h1> als auch <div> Elemente von einem roten, nullgroß

fSCSS -Animation:

FSCSS bietet eine kompaktere Syntax. Hier ist das FSCSS -Äquivalent:

<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>

Die

-Syntax verkauft die $(...) -DEklaration und wendet sie sowohl auf @keyframes als auch auf <h1> an. Das <div> ist eine Kurzform, mit der sowohl %2(width, height[: ...]) als auch width gleichzeitig die Eigenschaften festgelegt werden können. height

codePen Beispiel:

Der bereitgestellte CodePen -Link (

https://www.php.cn/link/dd32c0fc8172ACD5312C1089A5AA4D33 ) zeigt den Effekt der Animation visuell. Auf diese Weise können Sie die Animation in Aktion sehen und die Kürze des FSCSS -Codes vergleichen. Die Animation zeigt einen reibungslosen Übergang zwischen den roten und blauen Quadraten.

Das obige ist der detaillierte Inhalt vonFSCSS -Animationsbeispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!