HTML+CSS实现缓冲效果

应同项目组要求，写一个等待缓冲的特效样式，初次接有点懵，虽然知道很小，但从未接触这个缓冲，无奈问度娘。

最开始实现缓冲是用gif动图，但现在有很多成熟的HTML+CSS的缓冲效果，当然还有JS、jQuery等。

本次案例效果使用HTML+CSS，HTML部分很简单，div盒子里写了5个span，主要是样式。

首先对div设置（宽、高、位置），其次是span（宽、高、行内块元素、位置，背景颜色以及最重要的动画效果）；

使用@keyframes创建动画，改变animation的样式，变成一下这样，使其出现到隐藏。

0%{   
    opacity: 1;   
}   
100%{   
    opacity: 0;   
}

之后通过nth-child()选择器实现逐个的样式实现，demo的最后使用JS控制“正在载入，请稍等……”的隐藏和显示，当加载完毕后，这句话会消失，当然，为了显示测试效果，我把closeDIV()这句注释掉了~

很久不写了，但学习不会停止，以后会持续更新……

HTML部分

<div class="loading">  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
        <span></span>  
    </div> 
    <div id="loading" style="position:absolute; left:600px; top:204px; width:227px; height:20px; z-index:1">正在载入中,请稍等.....</div>

CSS部分

       .loading{   
            width: 150px;   
            height: 15px;   
            margin: 0 auto;   
            margin-top:164px;   
            text-align: center;   
        }   
        .loading span{   
            display: inline-block;   
            width: 15px;   
            height: 100%;   
            margin-right: 5px;   
            background: #066CAD;   
            -webkit-animation: load 1.04s ease infinite;   
        }   
        .loading span:last-child{   
            margin-right: 0px;    
        }   
        @-webkit-keyframes load{   
            0%{   
                opacity: 1;   
            }   
            100%{   
                opacity: 0;   
            }   
        }   
        .loading span:nth-child(1){   
            -webkit-animation-delay:0.13s;   
        }   
        .loading span:nth-child(2){   
            -webkit-animation-delay:0.26s;   
        }   
        .loading span:nth-child(3){   
            -webkit-animation-delay:0.39s;   
        }   
        .loading span:nth-child(4){   
            -webkit-animation-delay:0.52s;   
        }   
        .loading span:nth-child(5){   
            -webkit-animation-delay:0.65s;   
        }

JS部分

function closeDiv()
      {
        document.getElementById('loading').style.visibility='hidden';
      }
      //closeDiv();

HTML+CSS实现缓冲效果

猜你喜欢