今天就跟大家聊聊有关怎么使用CSS3的页面加载动画，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
公司主营业务：成都网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出岳阳县免费做网站回馈大家。
前两天从一个网站中看到了一些比较好的loading动画效果，是用纯CSS3来写的，感觉不错，就尝试着照着效果来自己写出来。
在开始之前，先复习一个小知识：CSS3新增的关键帧动画，可以用来实现很多的动画，我们可以通过animation-delay来控制动画延迟执行，来实现丰富的效果。
当animation-delay的值为正值时，动画将被延迟从初始状态开始执行；
当animation-delay的值为负数时，动画将被提前从该值（负数的绝对值）对应的状态开始执行。
（效果图片可能不太清楚，请谅解）
一、第一种效果
一共16个小正方形，将位置定位，通过关键帧来改变正方形的透明度
{animation: ball 2s 0s ease infinite;}
@keyframes ball {
0%{
opacity: 1;
}
50%{
opacity: 1;
}
51%{
opacity: 0;
}
}对每一个正方形设置animation-delay值，在这里我的整体动画耗时是2s，均分16个正方形是0.125s，于是我设置的animation-delay值是从-1.875s开始以0.125的数差开始增加一直到0。
二、第二种效果
.jpg)
中间一个大球的位置不变，旁边三个小球分别包含在三个正方形中，将小球设置定位{top:0;left:0;}，通过设置正方形rotateZ旋转便可以形成这种交叉。
通过关键帧动画来设置动画过程（下面关键帧动画的书写并不是最好的方法），并给每个小球设置animation-delay的值，可以让三个小球在不同的时刻从正面通过。
{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
0%{
height:25px;
width: 25px;
top: 0;
left: 0;
}
50%{
height: 20px;
width: 20px;
top: 60px;
left: 60px;
}
51%{
height: 15px;
width: 15px;
top: 60px;
left: 60px;
}
100%{
height: 20px;
width: 20px;
top: 0;
left: 0;
}
}另外，还需要给三个小球的父容器通过关键帧动画设置z-index值，来达到当小球是在围绕大球旋转的视觉效果。
{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
0%{
z-index: 6;
}
50%{
z-index: 6;
}
51%{
z-index: 4;
}
}三、第三种效果
这种效果就比较简单了，只要改变小球的大小以及透明度就行了（透明度以及小球的宽高在初始时已定义）。
{animation: light 1.5s 0s ease infinite;}
@keyframes light {
50%{
opacity: 0.4;
height: 15px;
width: 15px;
}
}四、第四种效果
初始时，四个小球定位到同一个位置，通过关键帧来改变小球的left值以及小球的大小即可。
{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
50%{
left: 100%;
}
}
@keyframes r_ballZ {
25%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}看完上述内容，你们对怎么使用CSS3的页面加载动画有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。