怎么使用CSS3的页面加载动画-创新互联

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

成都创新互联公司主要从事成都网站建设、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务苏州,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

前两天从一个网站中看到了一些比较好的loading动画效果，是用纯CSS3来写的，感觉不错，就尝试着照着效果来自己写出来。

在开始之前，先复习一个小知识：CSS3新增的关键帧动画，可以用来实现很多的动画，我们可以通过animation-delay来控制动画延迟执行，来实现丰富的效果。

当animation-delay的值为正值时，动画将被延迟从初始状态开始执行；

当animation-delay的值为负数时，动画将被提前从该值（负数的绝对值）对应的状态开始执行。

（效果图片可能不太清楚，请谅解）

怎么使用CSS3的页面加载动画

一共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。

怎么使用CSS3的页面加载动画

中间一个大球的位置不变，旁边三个小球分别包含在三个正方形中，将小球设置定位{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的页面加载动画有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：怎么使用CSS3的页面加载动画-创新互联
分享网址：http://6mz.cn/article/cocdsg.html

网站建设知识

怎么使用CSS3的页面加载动画-创新互联

其他资讯