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> 和 <div> 元素都从红色、零大小的正方形过渡到蓝色、150 像素的正方形。

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[: ...]) 是同时设置 width 和 height 属性的简写。

CodePen 示例：

提供的CodePen链接（https://www.php.cn/link/dd32c0fc8172acd5312c1089a5aa4d33）直观地演示了动画效果。 这使您可以查看正在运行的动画并比较 FSCSS 代码的简洁性。 动画显示红色和蓝色方块之间的平滑过渡。

以上是FSCSS 动画示例的详细内容。更多信息请关注PHP中文网其他相关文章！