用CSS3创建预加载动画集-教程-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

首页推荐

用CSS3创建预加载动画集

0.0°

2015-04-16 自译外文 教程 原作者： Aaron Lumsden 举报 32675 167 56 19

谢尔鱼关注

为了在ui中国上进行展示，楼主将原文中的CSS3动画用PS重新制作了一遍，原文中有小部分代码遗漏，楼主也会补充完整~感兴趣的小伙伴可以动手写一写代码，试一试~

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

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

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

伪元素（PseudoElements）—— :before :after

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

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

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

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

CSS3 动画（Animation）

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

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

备注：在我们进行以下演示之前要注意的是，特定的前缀没有包含在以下的代码片段中。如果你需要特定的前缀，那么请参阅codepen例子。

1. 音频波

这个预加载的想法源于创建一个类似于音频波的动画。

HTML

这是通过创建五个span标签来实现的，每一个标签代表一个音频条。

<div id="preloader_1">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

CSS

动画效果是通过每个span的高度从5px增长到30px来实现的，span从中央向Y轴方向变化15px实现了这种效果。

#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}
 
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
 
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

默认情况下，每个span的动画是在同一时刻发生的。墨西哥波效果是通过为每个span添加animation-delay属性延迟2毫秒实现的。每个span是通过nth-child()选择器进行定位的。

2. 圆形方块

这种预加载使用四个方块，移动、旋转、改变颜色最后变成圆形。

HTML

这个预加载是使用四个span创建的。每一个span是一个圆/方，都有其相应的动画。

<div id="preloader_2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

这四个span从方形变为圆形是通过调整border-radius从0px（方）到20px（圆）来实现的。

#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
    display:block;
    bottom:0px;
    width: 20px;
    height: 20px;
    background:#9b59b6;
    position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;
 
}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
 
@-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
 
 
@-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

每一个形状都相对于其当前的位置沿着X&Y轴向相反的方向旋转移动。每一个span的颜色也都从统一的紫色动态转变为自己特有的颜色。最终给人的印象就是将几个圆形合并为一个方形。

3. 交叉的形状

交叉形状预加载只使用了单个的div，再加上我们之前谈到的:before和:after伪元素。

（原图链接）

HTML

<div id="preloader_3"></div>

CSS

一个动画是基于#preloader_3:befor的，另一个动画是基于#preloader_3:after的。每个动画在相反的时间变化成不同的颜色。类似于前面讲到的预加载动画，每一个伪元素采用border-radius属性从圆形变为方形。

#preloader_3{
    position:relative;
}
#preloader_3:before{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#9b59b6;
    animation: preloader_3_before 1.5s infinite ease-in-out;
}
 
#preloader_3:after{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#2ecc71;
    left:22px;
    animation: preloader_3_after 1.5s infinite ease-in-out;
}
 
@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
    100% {transform: translateX(0px)}
}

4. 蛇形动画

蛇形动画由一系列被设计为圆的span组成。

（原图链接）

HTML

这里注明一下，你可以使用仅有3个圆组成的蛇形预加载动画，这样的话，你就只需要一个#preloader_4 div，再加上:before和:after。

<div id="preloader_4">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
 </div>

CSS

蛇形预加载动画是通过调整每一个span在Y轴上的坐标变化-10px以及调整颜色由蓝变黄来实现的。为每一个span添加大小从0px变为20px的投影来创建底层阴影。

#preloader_4{
    position:relative;
}
#preloader_4 span{
    position:absolute;
    width:20px;
    height:20px;
    background:#3498db;
    opacity:0.5;
border-radius:20px;
    -animation: preloader_4 1s infinite ease-in-out;
 
}
#preloader_4 span:nth-child(2){
    left:20px;
    animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
    left:40px;
    animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
    left:60px;
    animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
    left:80px;
    animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;  box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

与pre-loader1类似，波形效果是通过为每个span添加animation-delay属性，使每个span动画相对于前面的span延迟2毫秒来实现的。

5. 旋转圆盘

这是……一个旋转的东西。

HTML

这里我们简单地为中央的圆形创建了一个div，通过div的:after伪类创建外部的边线。

<div id="preloader5"></div>

CSS

通过为div的伪类:after添加一条上描边和一条下描边，并添加50px的border-radius来创建两条外部边线。为主div添加动画效果，仅是改变主div的颜色，并通过添加transform: rotate()来实现旋转效果。:after伪类动画就是旋转着改变外框的颜色。

#preloader5{
    position:relative;
    width:30px;
    height:30px;
    background:#3498db;
    border-radius:50px;
    animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid #9b59b6;
    border-bottom:10px solid #9b59b6;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
    animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

6. 闪烁的窗口

我们这个动画有点“微软”……

（原图更流畅）

HTML

这个预加载动画使用一个div加四个span来创建。

<div id="preloader6">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

这些方块排列在一个栅格中。整个预加载动画是通过添加到主div上的旋转动画实现的。另外添加到span上的动画是将大小从100%缩小到50%，然后我们为每一个span添加animation-delay来创建脉冲效果。

#preloader6{
    position:relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
}
#preloader6 span{
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;
 
}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
    animation-delay: .2s;
 
}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
    animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
    animation-delay: .6s;
}
@keyframes preloader_6{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}