为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 不用设计,css制作各种loading…...

不用设计,css制作各种loading……

2018.08.20 16:50 1323浏览

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

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

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

综上所述,前端工程师利用自己的技术来制作loading尤为重要,好处有两点:
1.因为loading是用相关的css和html制作,不需要加载gif图片,故一定程度上节省了加载时间;
2.因为是自己写的,所以动画上自己可以更好的控制;

本人不才,利用业余时间制作的几个利用css3制作loading的demo,供大家参考,时间有限可能有一些浏览器兼容问题,欢迎与我沟通相关技术问题。

css部分

        *{margin:0;padding:0;}        .boxflex{display:box;display:-webkit-box;}        .center{display:box;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}        .box{width:200px;height:200px;border:1px solid #ccc;position:relative;}        .move{animation:move 2s infinite;-webkit-animation:move 2s infinite;}        .scale{animation:scale 1s infinite;-webkit-animation:scale 1s infinite;}        .line{animation:line 1s infinite;-webkit-animation:line 1s infinite;}        .fz{animation:fz 1.5s infinite;-webkit-animation:fz 1.5s infinite;}        .delay1{animation-delay:0.25s;-webkit-animation-delay:0.25s;}        .delay2{animation-delay:0.5s;-webkit-animation-delay:0.5s;}        .load{width:100px;height:100px;border:10px solid #ccc;border-radius:50%;display:block;}        .load1{border-top:10px solid #64efb9;}        .load2{position:relative;}        .load2:before{position:absolute;top:0;left:50%;margin-left:-10px;margin-top:-15px;width:20px;height:20px;border-radius:50%;background:#fff;content:'';box-shadow:0 0 10px #747373;}        .sc,.li{display:block;}        .sc i{width:20px;height:20px;background:#64efb9;border-radius:50%;display:inline-block;margin:0 10px;}        .li i{display:inline-block;background:#64efb9;width:10px;height:50px;margin:0 4px;}        .li em{background:#fff;border:10px solid #64efb9;width:50px;height:50px;display:inline-block;}        .li i:nth-child(2){animation-delay:.2s;-webkit-animation-delay:.2s;}        .li i:nth-child(3){animation-delay:.3s;-webkit-animation-delay:.3s;}        .li i:nth-child(4){animation-delay:.4s;-webkit-animation-delay:.4s;}        .li i:nth-child(5){animation-delay:.5s;-webkit-animation-delay:.5s;}        .li i:nth-child(6){animation-delay:.6s;-webkit-animation-delay:.6s;}

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


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
67
获赞与收藏
355

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消