如何通过CSS3实现loading的效果

作者: MakingChoice | 来源:发表于2016-04-10 16:12 被阅读331次

如何通过CSS3实现loading的效果
CSS 各种loading 实现
CSS3 loading加载动画
超酷的 CSS3 loading 预加载动画特效
Facebook loading animation using
CSS3实现10种Loading效果
CSS3实现18种Loading效果
Ajax Loading Style
CSS3 实现loading动画效果
CSS3动画：DIY Loading动画

在移动端今天跳转或者加载数据的时候，为了更好的体验可以通过添加过的loading效果来进行过渡。下面我用CSS3写了一个loading的效果，来看一下效果。

jdfw.gif

在添加过渡的时候，只要把上面的效果添加到一个modal模态层中就可以实现了。
下面是步骤：
1、在<code>body</code>中添加一个<code>div</code>为其添加<code>preloader</code>类。
下面是代码：

<body>   <div class="preloader">   </div></body>

2、在<code>preloader</code>类中设置<code>div</code>的大小和动画效果。这个动画效果的目的就是实现这个<code>div</code>围绕自己的中心不停的旋转。step的讲解，下面是其连接可以看一下:step
下面是代码：

.preloader {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: preloader-spin 1s steps(12, end) infinite;
    animation: preloader-spin 1s steps(12, end) infinite;
}

@-webkit-keyframes preloader-spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes preloader-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

3、通过<code>preloader</code>类的:after伪类来添加背景图，把loading的jpg添加进来。
下面是代码：

.preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
}

其实原理就是通过一个单独的一个静态的图片，如下图所示，让其不停的旋转产生loading的效果。

静态图片.png