css3 animation

• 源码
• 演示

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

搭建页面结构

        
Loading
        

            

            

            

            

        

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