CSS loading動畫



作者這邊分享幾個相當不錯以css來製作 loading 動畫的公開源碼的站台

要注意拿到 code 要再小小加工一下
為div 給它一個 id 方便 js 隱藏控制


<div id="c3" class="spinner" style="z-index: 999;visibility:hidden">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

在 css 裡面補上 ,使它可以跨越html結構,位移到自己想要的位置顯示

#c3{

    top:33%;
    left:27%;
    position:fixed;

}






















http://www.css-spinners.com/

















http://projects.lukehaas.me/css-loaders/
















http://tobiasahlin.com/spinkit/






沒有留言:

張貼留言