您现在的位置是:首页 > 技术栈 > HTML/CSSHTML/CSS

CSS实现 loading 小动画

2020-03-20【HTML/CSS】人已围观

简介相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了
那么他是怎么实现的呢?其实通过一些简单的css技巧就可以实现啦!

首先直接上代码-HTML代码如下:

<div class="container">
       <div class="box">
           <div class="group">
               <span class="c8"></span>
               <span class="c2"></span>
           </div>
           <div class="group">
               <span class="c6"></span>
               <span class="c4"></span>
           </div>
       </div>
       <div class="box">
           <div class="group">
               <span class="c1"></span>
               <span class="c3"></span>
           </div>
           <div class="group">
               <span class="c7"></span>
               <span class="c5"></span>
           </div>
       </div>
   </div>


CSS代码如下:
 
<style>
       *{
           margin: 0;
           padding: 0;
       }
       body{
           background-color: #000000;
       }
       .container{
           margin: 300px auto;
           width: 80px;
           height: 80px;
           position: relative;
       }
       .box{
           width: 50px;
           height: 50px;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
        
       }
       span{
           display: block;
           width: 15px;
           height: 15px;
           background-color: #fff;
           border-radius: 50%;
           text-align: center;
           line-height: 15px;
           animation: loading 0.8s linear infinite;
           box-shadow: 0px 0px 24px 2px #ffffff;
       }
       .group{
           display: flex;
           justify-content: space-between;
       }
       .container .box:nth-of-type(2){
           transform: rotate(45deg);
           position: absolute;
           top: 0;
           left: 0;
       }
       .c1{
           animation-delay: -0.5s;
       }
       .c2{
           animation-delay: -0.6s;
       }
       .c3{
           animation-delay: -0.7s;
       }
       .c4{
           animation-delay: -0.8s;
       }
       .c5{
           animation-delay: -0.9s;
       }
       .c6{
           animation-delay: -1s;
       }
       .c7{
           animation-delay: -1.1s;
       }
       .c8{
           animation-delay: -1.2s;
       }
       @keyframes loading {
           0%{
               transform: scale(0);
           }
           50%{
               transform: scale(1);
           }
           100%{
               transform: scale(0);
           }
       }
   </style>

下面是实现的效果,我可能添加的阴影有点多,大家自己可以自己进行调整




首先要做出这样一个动画效果来,我们要去思考一个问题:它是真的在转圈圈吗?
答案是:NO
在我看来,其实很多特效不过是用了障眼法 这让我想起了《犯罪嫌疑人X的献身》中的一句经典台词:
 
看上去是几何问题,实际上是函数问题


其实无论是在数学领域,还是在计算机领域,还是无论在其他任何领域,处理问题的关键就在于是否看清楚问题的本质为何。回到这个动画,看起来是一个旋转的效果,其实是八个圆在原地在不同时延下放大缩小的结果
 

第一步:画出八个圆


这里我采用的方法是先定义了两个宽高相同的容器,里面各自包含四个圆,放在四个角落,(可以用定位完成,也可以用弹性盒子完成,大家选择自己喜欢的方法就好)此时四个圆是重叠的,我们把其中一个容器渲染45度,我们就可以得到一个由八个圆组成的圆环。

代码如下:
  .container .box:nth-of-type(2){
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            left: 0;



效果如下: 至于圆的大小,阴影,颜色,大家自己随意发挥


第二步:定义关键帧


这里用到了animation
 
  @keyframes loading {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(0);
            }
        }


  

span{
            display: block;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 15px;
            animation: loading 0.8s linear infinite;
            box-shadow: 0px 0px 24px 2px #ffffff;
        }



把我们所定义的时间分为两个等份: 0~50%放大1倍;50% ~ 100%然后在还原到原来的大小,给一个infinite ,让他无限循环。 这个时候你可以看到八个圆在原地一起变大变小
 

第三步:添加不同延时

 
  .c1{
            animation-delay: -0.5s;
        }
        .c2{
            animation-delay: -0.6s;
        }
        .c3{
            animation-delay: -0.7s;
        }
        .c4{
            animation-delay: -0.8s;
        }
        .c5{
            animation-delay: -0.9s;
        }
        .c6{
            animation-delay: -1s;
        }
        .c7{
            animation-delay: -1.1s;
        }
        .c8{
            animation-delay: -1.2s;
        }


这里我给每一个圆单独设置了延迟时间 注意: 这里延迟的时间是负数的原因是让他提前开始动画,不然用户刚进入页面的时候才开始动画的话,体验会非常不连贯 到这里基本这个loading小动画就做完了,如何实现其实不重要,现在很多网站都会采用动图来直接实现,重点在于思路:处理问题时一定要看清楚问题的本质 这个才是最重要的 如有不对的地方,请多多包涵与指正

Tags:CSS   网站建设   前端开发

很赞哦! ()

上一篇:html5语义学习

下一篇:返回列表

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2018-06-26
  • 网站程序:帝国CMS7.5
  • 文章统计34篇文章
  • 标签管理标签云
  • 统计数据友盟数据
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们