CSS 的loading特效

之前做loading效果都是用的框架自帶的，上週正好碰到需要，自己查了下資料，自己寫了幾個例子。

HTML的結構無非兩種，第一自己寫span結構；第二用僞元素模擬結構。

第一種：html結構

<div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

css

#preloader_1{
            position: relative;
            left:50%;
            width:45px;
            height:30px;
        }
        #preloader_1 span{
            display: block;
            width:9px;
            height:5px;
            position: absolute;
            bottom:0;
            background: yellow;
            animation: preloader_1 1.5s infinite ease-in-out;
        }
        #preloader_1 span:nth-child(2){
            left:11px;
            animation-delay: .2s;
        }
        #preloader_1 span:nth-child(3){
            left:22px;
            animation-delay: .4s;
        }
        #preloader_1 span:nth-child(4){
            left:33px;
            animation-delay: .6s;
        }
        #preloader_1 span:nth-child(5){
            left:44px;
            animation-delay: .8s;
        }
        @keyframes preloader_1 {
            0% {height:5px;transform:translateY(0px);background:yellow;} 
            25% {height:30px;transform:translateY(15px);background:yellowgreen;}
            50% {height:5px;transform:translateY(0px);background:yellow;} 
            100% {height:5px;transform:translateY(0px);background:yellow;}

        }

效果圖

第二種用僞元素模擬

html結構

  <div id="preloader_3">
        
    </div>

css結構

 #preloader_3{
            position: relative;
            left:50%;
            width:40px;
            height:40px;
        }
        #preloader_3:before{
            width:20px;
            height:20px;
            border-radius: 20px;
            background: tomato;
            content: '';
            position: absolute;
            animation: preloader_3_before 1.5s infinite ease-in-out;
        }
        #preloader_3:after{
            width:20px;
            height:20px;
            border-radius:20px;
            background:blue;
            content:''; 
            position:absolute;
            background:#2ecc71;
            left:22px;
            animation: preloader_3_after 1.5s infinite ease-in-out;
        }
        @keyframes preloader_3_before {
            0%{transform: translateX(0px) rotate(0deg)}
            50%{transform: translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71; border-radius:0px;}
            100%{transform: translateX(0px) rotate(0deg)}
        }
        @keyframes preloader_3_after {
            0%{transform: translateX(0px) rotate(0deg)}
            50%{transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6; border-radius:0px;}
            100%{transform: translateX(0px) rotate(0deg)}
        }

效果圖