巧用CSS3制作时尚的网页加载动画效果

在现代网页设计中，预加载是一种很常见的情形。作为用户，我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时，预加载能提供视觉反馈，并管理用户期望，降低用户放弃浏览网站的几率。

源文件代码：MissYuan_源文件.rar

用CSS3创建预加载动画的准备条件

在我们深入CSS3，创建预加载动画集之前，我们先讨论一些CSS3中非常重要的属性。

伪元素（Pseudo Elements）:before :after

伪元素在用CSS3创建预加载动画的过程中是非常有用的。伪元素在本质上是在HTML元素之前或之后添加一个假元素。

“伪来源于希腊语pseudēs，意思是假的。”

这类似于我们创建一个额外的并不真正存在的元素。不管怎么说，伪元素可以使用CSS样式。虽然伪元素在创建预加载动画过程中不是必需的，但在使用最少标签问题上发挥了作用。

伪元素和其它任何HTML元素一样，可以被定义样式，唯一不同的是，伪元素必须定义content属性。没有指定content属性，伪元素是不会显示的。Content属性可以包含任何的文字，例如在预加载动画里的“loading”字样。然而，假如你不需要任何文字的话，内容可以为空。

CSS3动画（Animation）

在创建CSS3预加载时，CSS伪元素是有用的但却非必需的，然而animation属性却是必需的。没有它，预加载只是一个静态的展示，无法动态呈现。

“当创建动画时，CSS动画的主要组件是@keyframes。可以将@keyframes看作是一条时间轴。在@keyframes里，你可以定义这些阶段，每一阶段都能有不同的风格声明。”——初学者对CSS动画的定义

备注：在我们进行以下演示之前要注意的是，特定的前缀没有包含在以下的代码片段中。如果