网页在加载内容过程中,因为网速原因,可能不会马上加载完毕。那么要提示用户正在加载中。
为了避免用户等待的时候显得枯燥,往往会把 loading 图标做成小动画。
用 CSS3 的 animation 和 帧动画,可以轻松实现 loading 小动画。
主要知识点
1、利用 @keyframes 帧动画,写出小圆圈由大到小,透明由 1 到 0 的动画。
@keyframes scaleAni {
0%{
transform:scale(1,1);
opacity: 1;
}
100%{
transform:scale(0,0);
opacity: 0;
}
}
2、利用 animation 属性给每个小圈添加动画。
PS:利用 animation 延迟时间实现动画的接力。延迟时间可以为负数哦~就表示动画提前运行一段时间。
循环 infinite ,匀速 linear ,往返 alternate
.loading1 span:nth-child(1){
animation: scaleAni 0.5s -0.5s linear infinite alternate ;
}
.loading1 span:nth-child(1)
表示 .loading1 下,第 1 个 span 子标签。
完整代码
<div class="loading loading1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
*{
margin: 0;
padding: 0;
}
.loading{
width: 120px;
height: 120px;
/*background: #eee;*/
margin-left: auto;
margin-right: auto;
margin-top: 50px;
position: relative;
}
.loading span{
display: block;
width: 16px;
height:16px;
border-radius: 100%;
background: #f00;
overflow: hidden;
}
.loading1{
display: flex;
justify-content: space-around;
align-items: center;
}
.loading1 span:nth-child(1){
animation: scaleAni 0.5s -0.5s linear infinite alternate ;
}
.loading1 span:nth-child(2){
animation: scaleAni 0.5s -0.4s linear infinite alternate ;
}
.loading1 span:nth-child(3){
animation: scaleAni 0.5s -0.3s linear infinite alternate;
}
.loading1 span:nth-child(4){
animation: scaleAni 0.5s -0.2s linear infinite alternate;
}
.loading1 span:nth-child(5){
animation: scaleAni 0.5s -0.1s linear infinite alternate;
}
@keyframes scaleAni {
0%{
transform:scale(1,1);
opacity: 1;
}
100%{
transform:scale(0,0);
opacity: 0;
}
}
拓展下
<div class="loading loading2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
基于之前的 loading CSS 。
.loading2 span{
position: absolute;
left:50%;
top:50%;
margin-left: -8px;
margin-top: -8px;
transform-origin: center 60px;
}
.loading2 span:nth-child(1){
transform: translateY(-52px) rotateZ(0);
}
.loading2 span:nth-child(2){
transform: translateY(-52px) rotateZ(45deg);
}
.loading2 span:nth-child(3){
transform: translateY(-52px) rotateZ(90deg);
}
.loading2 span:nth-child(4){
transform: translateY(-52px) rotateZ(135deg);
}
.loading2 span:nth-child(5){
transform: translateY(-52px) rotateZ(180deg);
}
.loading2 span:nth-child(6){
transform: translateY(-52px) rotateZ(225deg);
}
.loading2 span:nth-child(7){
transform: translateY(-52px) rotateZ(270deg);
}
.loading2 span:nth-child(8){
transform: translateY(-52px) rotateZ(315deg);
}
.loading2 span:nth-child(1){
animation: scaleAni2 0.8s -0.8s linear infinite both ;
}
.loading2 span:nth-child(2){
animation: scaleAni2 0.8s -0.7s linear infinite both ;
}
.loading2 span:nth-child(3){
animation: scaleAni2 0.8s -0.6s linear infinite both;
}
.loading2 span:nth-child(4){
animation: scaleAni2 0.8s -0.5s linear infinite both;
}
.loading2 span:nth-child(5){
animation: scaleAni2 0.8s -0.4s linear infinite both;
}
.loading2 span:nth-child(6){
animation: scaleAni2 0.8s -0.3s linear infinite both;
}
.loading2 span:nth-child(7){
animation: scaleAni2 0.8s -0.2s linear infinite both;
}
.loading2 span:nth-child(8){
animation: scaleAni2 0.8s -0.1s linear infinite both;
}
@keyframes scaleAni2 {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
明白原理后,发挥想象,我们可以做更多的 loading 效果~