重建 CSSLoad.net

背景

当我第一次了解 CSS 中的关键帧动画时，CSSLoad.net 的想法就出现了。当时，我有一个专门用于加载动画图形的项目，但这更令人鼓舞，因为原生动画比光栅图像的限制更少。任何大小、任何速度、任何颜色和其他功能，没有服务器负载。所有动画都随着页面加载而运行。这就是我 preloaders.net 用户多年来一直要求的功能。

我创建了该网站的第一个版本，但它并没有什么用，因为它对动画的控制太少。在发布一年后，当我看到 CSS-Tricks 上的“弹性动画加载动画”文章后，我萌生了开发该项目第二个版本的想法。最大的想法是为用户提供纯 CSS 加载动画，并让他们以最小的努力自由地生成所需的动画。瞧，第二个版本已经准备好了！

感谢 Chris 的想法，以及 Jacques 在同一篇文章中提供的 Windows 8 加载动画想法。现在让我们深入了解一下。

重用工具

正如我所说，我在加载图像动画生成器的开发方面有经验，所以我心想：为什么要重新发明轮子？我从 preloaders.net 上使用的一些表单元素中借鉴了一些想法，比如 jQuery、颜色选择器、Tigra 滑动器 和我自己的一些代码片段（比如我自己的“尺寸滚动器”）。事实上，我经常制作自己的插件，因为这在代码效率和减少代码量方面非常有用。只编写你需要的代码通常比使用一刀切的解决方案更好。

现在，用于选择加载程序组件的表单控件已经准备好了。我将跳过这段代码，因为你可以在网站上看到它，而且它非常无聊。我们可以继续进行应用程序的“精华”部分：CSS 动画生成器。

选择选项

借鉴了我自己的图像动画和其他来自网络的动画的想法，我创建了几个 CSS 加载程序。我列出了用户应该能够更改的选项：

• 颜色
• 动画速度
• 尺寸
• 反转动画的能力

简单示例

以下是一个特定加载程序动画的示例。为了简便起见，我会保留未加前缀的代码，但网站生成的代码使用所有正确的代码前缀。

#noTrespassingOuterBarG {
  height: 20px;
  width: 160px;
  border: 1px solid #000000;
  overflow: hidden;
  background-color: #FFFFFF;
}

.noTrespassingBarLineG {
  background-color: #000000;
  float: left;
  width: 14px;
  height: 120px;
  margin-right: 24px;
  margin-top: -28px;
  transform: rotate(45deg);
}

.noTrespassingAnimationG {
  width: 236px;
  animation-name: noTrespassingAnimationG;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes noTrespassingAnimationG {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left:- 38px;
  }
}

<div id="noTrespassingOuterBarG">
  <div id="noTrespassingFrontBarG" class="noTrespassingAnimationG">
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
    <div class="noTrespassingBarLineG">
    </div>
  </div>
</div>

更多注意事项

在开发任何应用程序之前，你必须考虑约束和限制。在这种情况下，我决定以下限制是合理的：

• 总动画持续时间不能小于 0。
• 主要 DIV 和内部 DIV 的大小不能小于 5 像素。
• 动画应该尽可能地在更多浏览器中工作。
• CSS 类名必须与用户通常使用的类名不同。我在每个类名末尾添加了一个“G”，代表“Generated（生成）”。

每个动画一个函数

其他一切都非常简单。每个动画都有自己的函数，它们具有相同的参数列表：firstColor、secondColor、width、height、animationSpeed、isReverse 和一个公共函数，用于决定调用哪个函数。每个控件都会在更改时调用此公共函数。以下是一个示例函数：

function noTrespassing(firstColor, secondColor, width, height, animationSpeed, isReverse) {

  var toReturn='';

  if (isReverse) {
    var begin = Math.round(width*38/160) * (-1);
    var end = 0;
  }
  else {
    var begin = 0;
    var end = Math.round(width*38/160) * (-1);
  }

  toReturn += '<style>#noTrespassingOuterBarG{height:'+height+'px;width:'+width+'px;border:'+Math.ceil(height/20)+'px solid #'+firstColor+';overflow:hidden;background-color:#'+secondColor+'}.noTrespassingBarLineG{background-color:#'+firstColor+';float:left;width:'+Math.round(width*14/160)+'px;height:'+Math.round(width*120/160)+'px;margin-right:'+Math.round(width*24/160)+'px;margin-top:-'+Math.round(width*28/160)+'px;';

  toReturn += addPrefix('[prefix]transform:rotate(45deg);');

  toReturn += '}.noTrespassingAnimationG{width:'+Math.round(width*236/160)+'px;';

  toReturn += addPrefix('[prefix]animation-name:noTrespassingAnimationG;[prefix]animation-duration:'+animationSpeed+'s;[prefix]animation-iteration-count:infinite;[prefix]animation-timing-function:linear;');

  toReturn += '}#noTrespassingFrontBarG{}';

  toReturn += addPrefix('@[prefix]keyframes noTrespassingAnimationG{0%{margin-left:'+begin+'px;}100%{margin-left:'+end+'px;}}');

  toReturn += '</style><div id="noTrespassingOuterBarG"><div id="noTrespassingFrontBarG" class="noTrespassingAnimationG"><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div><div class="noTrespassingBarLineG"></div></div></div>';

  return toReturn;
}

此函数中的变量不言自明。你可以看到动画代码是如何根据特定表单元素更改事件进行更改的。我认为这里没有必要深入细节，除了 `addPrefix` 函数。此函数只是通过一个全局前缀数组变量循环来替换代码中的 `[prefix]` 部分，该变量会在代码对话框中选择时进行更改。

就是这样！其他内容你可以在项目的代码源代码中找到。我们希望收到一些建议、问题，当然还有批评。