纯css实现loading动画
相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了
那么他是怎么实现的呢?其实通过一些简单的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>
</head>
<body>
<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>
下面是实现的效果,我可能添加的阴影有点多,大家自己可以自己进行调整
首先要做出这样一个动画效果来,我们要去思考一个问题:它是真的在转圈圈吗?
答案是: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小动画就做完了,如何实现其实不重要,现在很多网站都会采用动图来直接实现,重点在于思路:处理问题时一定要看清楚问题的本质 这个才是最重要的
如有不对的地方,请多多包涵与指正