FSCSS動畫示例

這個示例使用FSCSS演示了一種簡潔的動畫技術。 讓我們將標準CSS動畫與FSCSS方法進行比較。

標準CSS動畫：

html很簡單：

>

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

CSS使用@keyframes來定義動畫：>

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

這會創建一個動畫，其中

和<h1>元素都從紅色的零大方正方形過渡到藍色的150px正方形。 <div>

> fscss動畫：

FSCSS提供更緊湊的語法。 這是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>

聲明，將其應用於

>和$(...)。 @keyframes是一個同時設置<h1>和<div>屬性的速記。 %2(width, height[: ...])> widthheight codepen示例：

>提供的CodePen鏈接（ https://www.php.cn/link/link/dd32c8172acd5312c1089a5a4d33 ）視覺上證明了動畫的效果。 這使您可以看到動畫中的動畫並比較FSCSS代碼的簡潔性。 動畫顯示了紅色和藍色正方形之間的平穩過渡。

>

以上是FSCSS動畫示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！