CSS3学习之页面加载动画（三）-css教程-PHP中文网

CSS3学习之页面加载动画（三）

青灯夜游

发布： 2018-10-15 15:54:09

转载

2547人浏览过

本篇文章再给大家分享6种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;
      }
    }

登录后复制

未完待续！

今天就分享到这里，后面还会有补充。希望能对大家的学习有所帮助，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap教程！

以上就是CSS3学习之页面加载动画（三）的详细内容，更多请关注php中文网其它相关文章！