css3 animation loading 动画 Demo

• 源码

• 演示

animation有几个属性 ：

 duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name 
 animation: 3s ease-in 1s 2 reverse both paused slidein

1. duration---------------持续时间 3秒

2. timing-function------运动速度(http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp)

3. delay-------------------延时时间 1秒

4. teration-count--------重复次数 2次

5. direction---------------播放方式反向(http://www.runoob.com/cssref/css3-pr-animation-direction.html)

6. both---------------------为元素规定填充模式(http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp)

7. play-state--------------暂停或播放动画(paused 或者 running)

8. name-------------------为@keyframes 动画规定一个名称

HTML

搭建页面结构

<div class="wrap">
        <div class="Loading">Loading</div>
        <div class="rorateBox">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div></div>

CSS样式

关键点都在CSS里面

/* 给最大div添加背景样式 */
    .wrap {        width: 100%;        height: 1000px;        background: linear-gradient(45deg, #6fc7b5 0%, #13bdce, 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);        background-size: 400%;        background-position: 0 100%;        position: relative;        animation: BjLoop 2s ease-in-out infinite;  /* 添加背景左右变化动画 */
    }    /* 让所有元素都居中 */
    .wrap * {        left: 50%;        top: 50%;        position: fixed;        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }    /* 给loading这几个字添加初始化样式 */
    .Loading {        color: #fff;        text-shadow: 1px 1px 1px #ccc,        0 0 10px #fff,            0 0 20px #fff,            0 0 30px #fff,            0 0 40px #ff00de,            0 0 70px #ff00de,            0 0 80px #ff00de,            0 0 100px #ff00de,            0 0 150px #ff00de;            animation: run ease-in-out 3s infinite; /* 添加字体变换颜色动画 */
            font-size: 50px;
      
    }    /* 给几个小圆点父元素定义宽高样式*/
    .rorateBox div {        width: 300px;        height: 300px;        animation: loadingLoop 3s ease-in-out infinite;  /* 添加小圆点旋转动画 */
    }    /* 制作小圆点 用为元素实现圆点*/
    .rorateBox div::after {        content: '';        display: inline-block;        width: 60px;        height: 60px;        background-color: #fff;        border-radius: 50%;        position: absolute;        transform: scale(0.17);        animation: loading-dot 3s ease-in-out infinite; /* 给小圆点添加放大缩小动画 */
    }    /* 下面这几个都是小圆点开始的位置 */

    .rorateBox div:nth-child(1) {        top: 114px;        left: -147px;        animation-delay:0s;
    }    .rorateBox div:nth-child(1)::after {        right: 0px;
    }    .rorateBox div:nth-child(2) {        top: -118px;        left: -116px;        animation-delay: 0.25s;
    }    .rorateBox div:nth-child(2)::after {        right: 0px;        bottom: 0;        animation-delay: 0.25s;
    }    .rorateBox div:nth-child(3) {        top: -125px;        left: 160px;        /* animation-delay: 0.50s; */
    }    .rorateBox div:nth-child(3)::after {        left: 0px;        bottom: 0;        animation-delay: 0.50s;
    }   
    .rorateBox div:nth-child(4) {        top: 131px;    left: 83px;
    }    .rorateBox div:nth-child(4)::after {        left: 26px;    top: 0;    animation-delay: 1s;
    }    /* 定义背景动画名称以及改变背景左右动画 */
    @keyframes BjLoop {
        0% {            background-position: 0% 100%;
        }
        50% {            background-position: 100% 0%;
        }
        100% {            background-position: 0% 100%;        
        }
    }    /* 定义小圆点动画名称放大缩小 */
    @keyframes loading-dot {
        0% {            transform:scale(0.17);        
        }
        50% {            transform:scale(0.5);
        }
        100% {            transform:scale(0.17);                
        }
    }    /* 定义小圆点父元素旋转动画名称和旋转360度动画  其实是小圆点的父元素在旋转，带动子元素转动*/
    @keyframes loadingLoop {
        0% {            transform: translate3d(-50%,-50%,0) rotate(0deg);        
        }
        100% {            transform: translate3d(-50%,-50%,0) rotate(360deg);
        }
    }    /* 定义loading几个字的变化颜色 */
    @keyframes run {
        %0{            text-shadow: 1px 1px 1px #ccc,                0 0 10px #fff,                0 0 20px #fff,                0 0 30px #fff,                0 0 40px #ff00de,                0 0 70px #ff00de,                0 0 80px #ff00de,                0 0 100px #ff00de,                0 0 150px #ff00de;
        }
        25%{            text-shadow: 1px  1px 1px #ccc,                  0 0 10px #fff,                   0 0 20px #fff,                   0 0 30px #fff,                   0 0 40px #3EFF3E,                   0 0 70px #3EFFff,                   0 0 80px #3EFFff,                   0 0 100px #3EFFee,                   0 0 150px #3EFFee;
        }
        50%{            text-shadow: 1px  1px 1px #ccc,                   0 0 10px #fff,                   0 0 20px #fff,                   0 0 30px #fff,                   0 0 40px #3EFF3E,                   0 0 70px #3EFFff,                   0 0 80px #3EFFff,                   0 0 100px #3EFFee,                   0 0 150px #3EFFee;
        }
        75%{            text-shadow: 1px  1px 1px #ccc,                   0 0 10px #fff,                   0 0 20px #fff,                   0 0 30px #fff,                   0 0 40px #3EFF3E,                   0 0 70px #3EFFff,                   0 0 80px #3EFFff,                   0 0 100px #3EFFee,                   0 0 150px #3EFFee;
        }
    }

image.png

作者：拯救宇宙是我的使命
链接：https://www.jianshu.com/p/04a6d181b572