码迷,mamicode.com
首页 > Web开发 > 详细

CSS3学习记录之loading动画

时间:2016-05-08 15:13:54      阅读:390      评论:0      收藏:0      [点我收藏+]

标签:

loading动画就是在加载一些网页内容的时候呈现出来的小动画,记录一下学到的几种loading动画:

效果:http://1.huizit1.applinzi.com/CSS/Loading/loading.html

第一个是一个圆形的一部分在旋转,实现原理:

  在相应的位置添加一个 i 标签,然后设置width和height(值一样),然后添加border-radius:50%,此时这个i标签呈现出来的是一个圆,为了和图示效果一样,需要把这个圆遮住多半个,用background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);这样用背景过渡的方法就让上面70%透明掉了。然后添加动画:0%{rotate(0deg)} 50%{rotate(180deg)} 100%{rotate(360deg)}, animation: loading-1 .2s linear 0s infinite;//循环播放。

 

第二个是几个竖线在不停的伸缩,实现原理:

  在相应的位置添加若干个 i 标签,这里添加了6个,i 标签是行内元素,因此他们可以在一行内,设置margin-right,width为4像素,height可以自己随便定义。然后添加颜色等属性。然后定义一个动画。

@keyframes loading-2{
        0%{
            transform: scaleY(1);
        }
        
        50%{
            transform: scaleY(0.4);
        }
        
        100%{
            transform: scaleY(1);
        }
    }

0%和100%的时候值要一样,这样才能平滑过渡。50%的时候可以伸缩相应的值。然后给每个 i 标签添加动画属性:animation: loading-2 1s ease-in .1s infinite;

一个动画循环是1s,0.1s延迟,循环播放,每个 i 标签的动画延迟时间递增一点,显示的结果就会呈现出波浪的效果。

 

第三个是围成一个圆的8个小圆在不停从大变小同时颜色由深变浅,这个原理和第二个是相同的,先添加8个 i 标签,设置position:absolute,width、height、border-radius、颜色、它的父级div不设置width和height,这样没有宽度和高度的父级div的左上角也是居中的,然后给每个 i 标签设置相应的top和left,也就是围着中心点均匀绕开。这样就完成了布局。然后添加动画:

@keyframes loading-3{
        0%{
            /*background: linear-gradient(transparent 0%);*/
            opacity: 1;
            transform: scale(2);
        }
        100%{
            /*background: linear-gradient(transparent 0%,transparent 100%);*/
            transform: scale(0.5);
            opacity: 0;
        }
    }

在0%的时候opacity:1(不透明度是1,即完全不透明),scale(2),大小为原大小的两倍,100%的时候opacity为0,完全透明,大小为原大小的一半,这样就能实现一边变小同时颜色变淡的效果。然后给 i 标签添加:animation: loading-3 .8s ease-in .1s infinite;每个 i 标签的延迟时间是递增的,并且递增到0.8s和一个循环的动画时间一样,这样才能保证只有一个最大的,后面的都是逐渐缩小的,如果想让在打开页面之后动画就是播放着的,可以给第一个延迟时间改成-0.8s,后面的递增0.1s即可。

 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    .box{
        width: 100%;
        padding: 3%;
        /*margin: 100px auto;*/
        box-sizing: border-box;
        overflow: hidden;
        /*background-color: #ccc;*/
    }
    .loader{
        width: 30%;
        height: 200px;
        /*background-color: #fff;*/
        border: 1px solid #ccc;
        float: left; 
        margin-right: 3%;
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justiy-content: center;
    }
    @keyframes loading-1{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(180deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    .loading_1{
        width: 35px;
        height: 35px;
        margin: auto;
        border-radius: 50%; 
        position: relative;
        background-color: #000;
        /*display: block;*/
        background: linear-gradient(transparent 0%, transparent 70%, #333 70%, #333 100%);
        animation: loading-1 .2s linear 0s infinite;
    }
    @keyframes loading-2{
        0%{
            transform: scaleY(1);
        }
        
        50%{
            transform: scaleY(0.4);
        }
        
        100%{
            transform: scaleY(1);
        }
    }
    .loading_2{
        width: auto;
        height: 35px;
        margin: auto;
        /*background-color: #000;*/
    }
    .loading_2 i{
        width: 4px;
        height: 35px;
        border-radius: 2px;
        margin-right: 4px;
        margin-left: 4px;
        background-color: #000;
        float: left; 
    }
    .loading_2 i:nth-child(1){
        animation: loading-2 1s ease-in .1s infinite;
    }
    .loading_2 i:nth-child(2){
        animation: loading-2 1s ease-in .2s infinite;
    }
    .loading_2 i:nth-child(3){
        animation: loading-2 1s ease-in .3s infinite;
    }
    .loading_2 i:nth-child(4){
        animation: loading-2 1s ease-in .4s infinite;
    }
    .loading_2 i:nth-child(5){
        animation: loading-2 1s ease-in .5s infinite;
    }
    .loading_2 i:nth-child(6){
        animation: loading-2 1s ease-in .6s infinite;
    }
    @keyframes loading-3{
        0%{
            /*background: linear-gradient(transparent 0%);*/
            opacity: 1;
            transform: scale(2);
        }
        100%{
            /*background: linear-gradient(transparent 0%,transparent 100%);*/
            transform: scale(0.5);
            opacity: 0;
        }
    }
    .loading_3{
        /*padding: 2px;*/
        width: 30px;
        height: 30px;
        margin: auto;
        background-color: #000;
        position: relative;
    }
    .loading_3 i{
        width: 8px;
        height: 8px;
        border-radius: 4px;
        position: absolute;
        /*clear: both;*/
        display: block;
        background-color: black; 
    }
    .loading_3 i:nth-child(1){
        top: 25px;
        left: 0px;
        background: red;
        animation: loading-3 .8s ease-in .1s infinite;
    }
    .loading_3 i:nth-child(2){
        top: 17px;
        left: 17px;
        background: #ff6600;
        animation: loading-3 .8s ease-in .2s infinite;
    }
    .loading_3 i:nth-child(3){
        top: 0px;
        left: 25px;
        background: yellow;
        animation: loading-3 .8s ease-in .3s infinite;
    }
    .loading_3 i:nth-child(4){
        top: -17px;
        left: 17px;
        background: green;
        animation: loading-3 .8s ease-in .4s infinite;
    }
    .loading_3 i:nth-child(5){
        top: -25px;
        left: 0px;
        background: #00ffff;
        animation: loading-3 .8s ease-in .5s infinite;
    }
    .loading_3 i:nth-child(6){
        top: -17px;
        left: -17px;
        background: blue;
        animation: loading-3 .8s ease-in .6s infinite;
    }
    .loading_3 i:nth-child(7){
        top: 0px;
        left: -25px;
        background: #ff00ff;
        animation: loading-3 .8s ease-in .7s infinite;
    }
    .loading_3 i:nth-child(8){
        top: 17px;
        left: -17px;
        background: #ff0099;
        animation: loading-3 .8s ease-in .8s infinite;
    }
</style>
<body>
    <div class="box">
        <div class="loader">
            <i class="loading_1"></i>
        </div>
        <div class="loader">
            <div class="loading_2">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="loader">
            <div class="loading_3">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS3学习记录之loading动画

标签:

原文地址:http://www.cnblogs.com/huizit1/p/5470587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!