CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單loading動(dòng)畫(huà)效果

發(fā)布時(shí)間：2018-04-17 16:24:07 作者：佚名

CSS的animation可以做出大多數(shù)的loading效果，今天腳本之家小編給大家?guī)?lái)了基于CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單loading動(dòng)畫(huà)效果，非常不錯(cuò)，需要的朋友參考下吧

曾經(jīng)以為，loading的制作需要一些比較高深的web動(dòng)畫(huà)技術(shù)，后來(lái)發(fā)現(xiàn)大多數(shù)loading都可以用“障眼法”做出來(lái)。比如一個(gè)旋轉(zhuǎn)的圓圈，并不都是將gif圖放進(jìn)去，有些就是畫(huà)個(gè)靜止圖像，然后讓它旋轉(zhuǎn)就完了。gif圖也可以，但是加載時(shí)間比較長(zhǎng)。

　　CSS的animation可以做出大多數(shù)的loading，比如：

loading1：

1、HTML：

<div id="ddr">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
</div>

2、CSS：

#ddr{
    margin: 0 auto;
    width: 70px;
    height: 120px;
}
.ddr{
    width: 10px;
    height: 120px;
    float: left;
    margin: 2px;
    background-color: #00ff00;
    animation: loading 1s infinite ease-in-out;/*animation：動(dòng)畫(huà)名稱(chēng) 持續(xù)時(shí)間 動(dòng)畫(huà)速度曲線 延遲 執(zhí)行多少次 是否正反方向輪流播放*/
}
.ddr2{
    animation-delay: -0.9s;/*定義開(kāi)始執(zhí)行的地方，負(fù)號(hào)表示直接從第900ms開(kāi)始執(zhí)行*/
}
.ddr3{
    animation-delay: -0.8s;
}
.ddr4{
    animation-delay: -0.7s;
}
.ddr5{
    animation-delay: -0.6s;
}
@keyframes loading {
    0%,40%,100%{ /*定義每幀的動(dòng)作*/
        -webkit-transform: scaleY(0.5);
    }
    20%{
        -webkit-transform: scaleY(1);
    }
}

loading2：

1、HTML：

 <div id="circle"></div>

2、CSS：

#circle{
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 5px white solid;
    border-left-color: #ff5500;
    border-right-color:#0c80fe;
    border-radius: 100%;
    animation: loading1 1s infinite linear;
}
@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}

loading3：

1、HTML：

 <div id="loader">
     <div id="loader-inner"></div>
 </div>

2、CSS：

#loader3{
    box-sizing: border-box;
    position: relative;
    margin-left: 48%;
    transform: rotate(180deg);
    width: 50px;
    height: 50px;
    border: 10px groove rgb(170, 18, 201);
    border-radius: 50%;
    animation: loader-3 1s ease-out alternate infinite;/* alternate表示則動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）反向播放 */
}
#loader3-inner{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0 inset rgb(170, 18, 201);
    border-radius: 50%;
    animation: border-zoom 1s ease-out alternate infinite;
}
@keyframes loader-3 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
@keyframes border-zoom {
    0%{
        border-width: 0px;
    }
    100%{
        border-width: 10px;
    }
}

loading4：

1、HTML：

 <div id="loading">
     <div id="loader" class="heart"></div>
 </div>

2、CSS：

#loading4{
    width: 100%;
    height: 100px;
}
#loader4{
    position: relative;
    margin-left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    animation: loader-4 1s ease-in-out alternate infinite;
}
.heart:before{
    position: absolute;
    left: 11px;
    content: "";
    width: 50px;
    height: 80px;
    transform: rotate(45deg);
    background-color: rgb(230, 6, 6);
    border-radius: 50px 50px 0 0;
}
.heart:after{
    position: absolute;
    right: 11px;
    content: "";
    width: 50px;
    height: 80px;
    background-color: rgb(230, 6, 6);
    transform: rotate(-45deg);
    border-radius: 50px 50px 0 0;
}
@keyframes loader-4 {
    0%{
        transform: scale(0.2);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

逢年過(guò)節(jié)，百度或者谷歌都會(huì)在首頁(yè)播放一段動(dòng)畫(huà)，比如元宵節(jié)：

這個(gè)動(dòng)畫(huà)不是gif圖，而是一張長(zhǎng)長(zhǎng)的包含所有幀的圖片：

仿照animation一幀一楨的思路，可以將這張圖片做成動(dòng)畫(huà)：

#picHolder{
  /* 圖片樣式 */
      position: absolute;
      top: %;
      left: %;
      width: px;
      height: px;
      margin-left:-px;
      background-image: url("../../../Library_image/tangyuan.png");
     background-repeat: no-repeat;
     background-position-x: ;
     cursor: pointer; 
 }

  function animation () {
  /* 定時(shí)移動(dòng)圖片，使觀眾看到不同的幀 */
    var po = 
    var i = 
    var holder = document.getElementById('picHolder')
    setInterval(function () {
      po += -
      i++
      holder.style.backgroundPositionX = po + 'px'
     if (i >= ) {
       i = 
       po = 
     }
   }, )
 }
 window.onload = function () {
   animation()
 }

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單loading動(dòng)畫(huà)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！