CSS3页面加载动画

今天就跟大家聊聊有关CSS3页面加载动画，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

在之前的文章【CSS3学习之页面加载动画（二）】中又分享了6个CSS3的加载动画，今天继续分享（标题接上一次），图片看得不真切。

十一、效果十一

四个小球分别包含于四个正方形p，将小球相对于正方形定位（top：0；left：0），将方形p设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

还剩下一个旋转的效果，这个便交给方形p的父级元素

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

十二、效果十二

这个效果实现起来不难，将九个小球固定好位置，改变小球透明度即可（每个小球要设置不一样动画时间）

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

十三、效果十三

还是九个小球，不过这里改变了小球的大小，为了防止因为改变大小而致使排版错乱，所以每个小球都包含在固定宽高的p中，使小球在p中横纵方向上时刻居中。这样就可以放心地改变小球的大小了（每个小球依然设置不同的动画时间）

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

十四、效果十四

撞球效果，四个小球横纵方向居中排列，中间两个小球不动，左右两边的小球分别向两边来回移动（注意运动的时间差即可）。

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

十五、效果十五

这是一个很常见的效果，同样的为了防止因为小球大小的改变而使页面排版发生错乱，在小球外面加套一层固定宽高的p。

对每个小球还要设置动画延迟

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

十六、效果十六

五个小球，只需横向居中，通过外边距来撑开小球之间的距离，通过关键帧动画改变小球的translateY、以及宽高和透明度。

小球初始宽高为15px，透明度为.6。

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {
      50%{
        transform: translateY(60px);
      }
    }
    @keyframes flip_ballS {
      50%{
        height: 15px;
        width: 15px;
        opacity: 0.6;
      }
      75%{
        height: 20px;
        width: 20px;
        opacity: 1;
      }
    }

未完待续！

看完上述内容，你们对CSS3页面加载动画有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。