亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

不用設計,css制作各種loading……

標簽:
Html/CSS

众所周知,loading已经充斥了各种页面当中:页面加载尚未完成前、瀑布流页面到达底部后加载新的数据之前、表单页面提交数据等待反馈之前,往往都会其相关数据到来前加一个loading等代图来过渡,其目的是提升页面的友好度,增强用户体验。

在现如今的大数据时代,这一点大为重要,但是有一个问题出现了,倘若在一个网络较差的环境下,loading一直存在,容易让用户产生倦怠,故而放弃该页面的访问。因此将页面loading做的更有趣味性就尤为重要,loading越有趣用户停留在页面的时间就会相应加长,从而也给数据的加载争取了宝贵的时间。

那么接下来就是loading的问题,传统页面的loading都是由设计师来设计一个gif图来实现,这样就产生了一个矛盾:gif图是图片加载它也需要耗费时间,同时如果要做的有趣就是要在图片的颜色和动画上下功夫,这样又可能导致gif图大小越做越大,从而拖慢了页面的加载时间。

综上所述,

animation制作动画部分

@keyframes move{
            0%{                transform:rotateZ(0);
            }
            100%{                transform:rotateZ(360deg);
            }
        }
        @-webkit-keyframes move{
            0%{                -webkit-transform:rotateZ(0);
            }
            100%{                -webkit-transform:rotateZ(360deg);
            }
        }
        @keyframes scale{            /*0%{
                transform:scale3d(1,1,1);
            }*/
            50%{                transform:scale3d(0,0,0);
            }            /*100%{
                transform:scale3d(1,1,1);
            }*/
        }
        @-webkit-keyframes scale{            /*0%{
                -webkit-transform:scale3d(1,1,1);
            }*/
            50%{                -webkit-transform:scale3d(0,0,0);
            }            /*100%{
                -webkit-transform:scale3d(1,1,1);
            }*/
        }
        @keyframes line{
            50%{                transform:scaleY(0);
            }
        }
        @-webkit-keyframes line{
            50%{                -webkit-transform:scaleY(0);
            }
        }
        @keyframes fz{
            0%{                transform:perspective(160px);
            }
            50%{                transform:perspective(160px) rotateX(-180deg) rotateY(0); 
            }
            100%{                transform:perspective(160px) rotateX(-180deg) rotateY(-180deg); 
            }
        }
        @-webkit-keyframes fz{
            0%{                -webkit-transform:perspective(160px);
            }
            50%{                -webkit-transform:perspective(160px) rotateX(-180deg) rotateY(0); 
            }
            100%{                -webkit-transform:perspective(160px) rotateX(-180deg) rotateY(-180deg); 
            }
        }

html部分

<div class="boxflex">
        <div class="box center">
            <span class="load load1 move"></span>
        </div>
        <div class="box center" style="background:#64efb9;">
            <span class="load load2 move"><i></i></span>
        </div>
        <div class="box center">
            <span class="sc">
                <i class="scale"></i>
                <i class="scale delay1"></i>
                <i class="scale delay2"></i>
            </span>
        </div>
        <div class="box center">
            <span class="li">
                <i class="line"></i>
                <i class="line"></i>
                <i class="line"></i>
                <i class="line"></i>
                <i class="line"></i>
                <i class="line"></i>
            </span>
        </div>
        <div class="box center">
            <span class="li">
                <em class="fz"></em>
            </span>
        </div>
    </div>

页面demo效果


700

![Uploading QQ截图20160727155536_186844.png . . .]



作者:峰极天下
链接:https://www.jianshu.com/p/bfee4c4b069a


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消