网页载入动画 php,CSS3学习之页面加载动画（一）

本篇文章就给大家分享四种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。

二、第二种效果

中间一个大球的位置不变，旁边三个小球分别包含在三个正方形中，将小球设置定位{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);

}

}

暂时就先写这么多，后面还会有补充。(未完待续)

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问CSS基础视频教程，CSS3视频教程，bootstrap教程！