在现代网页设计中，预加载是一种很常见的情形。作为用户，我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时，预加载能提供视觉反馈，并管理用户期望，降低用户放弃浏览网站的几率。
源文件代码：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看作是一条时间轴。在
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
