CSS3 几步即可实现loading动画效果

最新推荐文章于 2024-08-30 00:13:53 发布

yeana1

最新推荐文章于 2024-08-30 00:13:53 发布

阅读量4.9k

点赞数 4

分类专栏： web前端文章标签：设计 css3 java web 职场

本文链接：https://blog.csdn.net/yeana1/article/details/51910166

版权

web前端专栏收录该内容

54 篇文章 1 订阅

订阅专栏

参照网上的设计，本篇分享一下非常常见的Loading的效果。

例子1：菊花状的Loading效果

------------------------------

第一步画出静态的小菊花。

.sk-fading-circle {

width: 40px;

height: 40px;

position: relative;

}

.sk-fading-circle .sk-circle {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

.sk-fading-circle .sk-circle:before {

content: '';

display: block;

margin: 0 auto;

width: 15%;

height: 15%;

background-color: #333;

border-radius: 100%;

}

<div class="sk-fading-circle">

<div class="sk-circle"></div>

… //为缩减篇幅省略中间10个div

<div class="sk-circle"></div>

</div>

代码如上，静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型，并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位，因此都重叠在了一起。

第二步将12个重叠的圆分散开。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}

.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}

… //节省篇幅，每个圆每隔30度递增旋转

.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}

<div class="sk-fading-circle">

<div class="sk-circle1 sk-circle"></div>

… //为缩减篇幅省略中间10个div

<div class="sk-circle12sk-circle"></div>

</div>

代码如上，用transform的rotate将各个圆点旋转，形成完整的菊花状。如果你对transform不熟的话，看下图，第二个圆点旋转30度的示意图，其余圆点的旋转自行脑补：

第三步通过animation控制opacity属性，让每个点淡进淡出

@-webkit-keyframes sk-circleFadeDelay {

0%, 39%, 100% { opacity: 0; }

40% { opacity: 1; }

}

@keyframes sk-circleFadeDelay {

0%, 39%, 100% { opacity: 0; }

40% { opacity: 1; }

}

.sk-fading-circle .sk-circle:before {

……

animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

}

这样每个点都在像信号灯一样同步地闪烁。

最后一步，给每个点设置animation-delay延时，以错开闪烁的时间，形成常见的菊花转转的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }

.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }

.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }

… //为缩减篇幅省略中间代码

.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

因为是12个圆点，每个圆点的闪烁间隔时间0.1s，因此第1个圆点没有animation-delay延时，立即闪烁。第二个圆点，从-1.1s开始闪烁（负数不理解的话，参考animation一文，意思是从该时间点开始启动，之前的动画效果不显示）。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果

例子2：ios版菊花Loading

------------------------------

明白了原理后，无非是在例子1的基础上，将圆点改成竖条，opacity半透明即可。

例子3：琴谱版Loading。

------------------------------

第一步，画出静态琴谱，很简单无非是一个外层div，内嵌几个并排的div而已。

.spinner {

height: 40px;

}

.spinner > div {

background-color: #333;

height: 100%;

width: 6px;

display: inline-block;

}

<div class="spinner">

<div></div>

… //你可以根据需求多加几个div

<div></div>

</div>

第二步，琴谱动起来

.spinner > div {

……

animation: sk-stretchdelay 1.2s infinite ease-in-out;

}

@keyframes sk-stretchdelay {

0%, 40%, 100% { transform: scaleY(0.4); }

20% { transform: scaleY(1.0); }

}

例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸。

最后一步，设置延时，让每个琴键在不同时间内拉伸。

.spinner .rect2 { animation-delay: -1.1s; }

.spinner .rect3 { animation-delay: -1.0s; }

.spinner .rect4 { animation-delay: -0.9s; }

.spinner .rect5 { animation-delay: -0.8s; }

<div class="spinner">

<div class="rect1"></div>

… //为节省篇幅省略中间代码

<div class="rect5"></div>

</div>