CSS3加载动画（原创）

利用CSS3中的animation属性可以实现很多很炫的动画效果。下面是自己写的一个动画加载效果，有兴趣的朋友可以看看。先看看animation属性有哪些：

@keyframes                   规定对象动画。
animation-name               规定@keyframes动画的名称。
animation-duration           规定动画完成所花费的时间，单位秒或毫秒。默认为0。
animation-timing-function    规定动画的过渡类型。默认为ease（平滑过渡）。linear（线性过渡）；ease-in（动画由慢到快）；ease-out（动画由快到慢）；ease-in-out（动画由慢到快再到慢）。
animation-delay              规定对象动画何时开始。默认为0。
animation-iteration-count    规定对象动画的播放次数。默认为1。
animation-direction          规定对象动画是否反向播放。默认为normal（动画正常播放）。alternate（动画按正反方向交替播放）。
animation-play-state         规定对象动画是否正在运行或暂停。默认为running（动画正在播放）。paused（动画已暂停）。
animation-fill-mode          规定对象动画之外的时间状态。

案例

    
        
        
        
            body{
                width: 100%;
                height: 100%;
                background-color: #000000;
            }
            .wrapper{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                position: absolute;
                top: 50%;                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
            }
            .circle{
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .circle .outer{
                width: 200px;
                height: 200px;
                position: absolute;
                border-radius: 50%;
                border: 2px solid rgba(255,255,255,.5);
                box-shadow: 1px 1px 10px 2px rgba(255,255,255,0.8);
                -webkit-animation: spin-out 2s infinite linear;
                animation: spin-out 2s infinite linear;
            }
            .circle .inner{
                width: 180px;
                height: 180px;
                border-radius: 50%;
                border: 7px solid rgba(255,255,255,.8);
                position: absolute;
                top: 5px;                left: 5px;
                border-top-color: transparent;
                border-bottom-color: transparent;
                box-shadow: 1px 1px 10px inset rgba(255,255,255,.2);
                -webkit-animation: spin 2s infinite linear;
                animation: spin 2s infinite linear;
            }
            .circle .inner2{
                width: 150px;
                height: 150px;
                border-radius: 50%;
                border: 10px solid rgba(255,255,255,1);
                position: absolute;
                top: 18px;                left: 18px;
                border-left-color: transparent;
                border-right-color: transparent;
                box-shadow: 1px 1px 10px 2px inset rgba(255,255,255,.5);
                -webkit-animation: spin-in2 2s infinite linear;
                animation: spin-in2 2s infinite linear;
            }
            .circle .inner3{
                width: 120px;
                height: 120px;
                border-radius: 50%;
                border: 7px solid rgba(255,255,255,.6);
                position: absolute;
                top: 37px;                left: 37px;
                border-top-color: transparent;
                border-bottom-color: transparent;
                box-shadow: 1px 1px 10px inset rgba(255,255,255,.5);
                -webkit-animation: spin-in3 1s infinite linear;
                animation: spin-in3 1s infinite linear;
            }
            .circle .inner4{
                width: 90px;
                height: 90px;
                border-radius: 50%;
                border: 7px solid rgba(255,255,255,.8);
                position: absolute;
                top: 53px;                left: 53px;
                border-top-color: transparent;
                border-bottom-color: transparent;
                box-shadow: 1px 1px 10px rgba(255,255,255,.5);
                -webkit-animation: spin-in3 1s infinite linear;
                animation: spin-in3 1s infinite linear;
            }
            @-moz-keyframes spin-out{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
            }
            @-webkit-keyframes spin-out{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
            }
            @keyframes spin-out{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
            }
            
            @-moz-keyframes spin{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
            }
            @-webkit-keyframes spin{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
            }
            @keyframes spin{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
            }
            
            @-moz-keyframes spin-in2{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
            }
            @-webkit-keyframes spin-in2{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
            }
            @keyframes spin-in2{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
            }
            
            @-moz-keyframes spin-in3{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
            }
            @-webkit-keyframes spin-in3{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
            }
            @keyframes spin-in3{
                from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
                to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
            }
        
    
    
        
            
                
                
                
                
                
            
        
    

效果演示.gif

实际的效果比上面这个效果图更炫哦！复制代码到本地自己运行下吧~

作者：后知后觉_A
链接：https://www.jianshu.com/p/482761bf6ca5