在现代网页设计中,预加载是一种很常见的情形。作为用户,我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时,预加载能提供视觉反馈,并管理用户期望,降低用户放弃浏览网站的几率。
源文件代码: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看作是一条时间轴。在