网页加载时loading效果css实现

随着框架的普及,大家对入口文件的加载动效的需求也越来越大了。而在不依赖js的基础上做出的效果也可以很酷炫了,下面我们将做三种非常常用的效果,希望可以应用到各位的项目中去。这些动画效果最核心的关键是css3中的opacity,animation-delay,transform,scale,filter等属性。

1.延迟效果,交替加载,连续加载,loading效果

要做如下一个渐变动态加载动画效果我们要做的是让每一个点一个个进入,做一个这样的交错效果,其实只需要很少量的css代码即可实现。

如图:

loding效果css

创建6个dom元素,给留个元素创建大小一样的圆点,然后让6个元素一次加载动效,每个动效差距0.2秒即可。

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//html
<div class="animates delay1"></div>
<div class="animates delay2"></div>
<div class="animates delay3"></div>
<div class="animates delay4"></div>
<div class="animates delay5"></div>
<div class="animates delay6"></div>

//css
.animates {
width:10px;
height:10px;
border-radius:10px;
animation-duration: 1s;
animation-delay: 0.8s;
animation-name: animate-fade;
animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
animation-fill-mode: backwards;
animation-name: animate-glow;
animation-timing-function: ease;
}
@keyframes animate-glow {
0% {
opacity: 0;
filter: brightness(3) saturate(3);
transform: scale(0.8, 0.8);
}
100% {
opacity: 1;
filter: brightness(1) saturate(1);
transform: scale(1, 1);
}
}
.delay1 {
animation-delay: 1s;
}
.delay2 {
animation-delay: 1.2s;
}
.delay3 {
animation-delay: 1.4s;
}
.delay4 {
animation-delay: 1.6s;
}
.delay5 {
animation-delay: 1.8s;
}
.delay6 {
animation-delay: 2s;
}

上面代码中应用了filter,让动效从透明是不透明,添加了一个过渡效果。添加了scale属性,让元素从小变正常大小。然后每个元素间隔.2秒出现,实现了loading效果。

2.渐变加载,带有弹出效果

让动画从小到大一个变幻效果,然后还有弹出的动画效果,这个效果听起来很麻烦,实际上从代码的实现方面来说是非常简单的。实现回弹效果主要通过CSS 中的cubic-bezier() 函数。该css函数可以实现从开始到结束的不同过渡效果。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//html
<div class="animation popup"></div>

//css
.animation{
width:200px;
height:200px;
background:red;
animation-name: animate-pop;
animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
animation-duration: 0.5s;
}
@keyframes animate-pop {
0% {
opacity: 0;
transform: scale(0.5, 0.5);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}

创建一个dom元素,给dom元素从加载到加载完成一个渐变以及从小到大的一个效果,然后给元素添加一个csscubic-bezier() 函数,从快到慢的弹出效果。

3.旋转加载效果

这个效果是非常常用的一个动效,实际应用到了css中的rotate旋转,让每根线旋转成一个圈,然后再加上渐变效果就好。

如图:

loading效果css

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//html
<div class="wrap-load"></div>

<div class="animations">
<div class="circle">
<div></div>
<div></div>
<div></div>
</div>
<div class="circle-bg"></div>
</div>

//css
.wrap-load2{position:relative;}
.animations .circle div{position:absolute;left:16px;top:0;width:3px;
height:36px;}
.animations .circle div:before,.animations .circle div:after{content:'';
display:block;height:50%;background:#fcfcfc;border-radius:5px;}
.animations .circle div:nth-child(2){transform:rotate(30deg);}
.animations .circle div:nth-child(3){transform:rotate(60deg);}
.animations .circle div:nth-child(4){transform:rotate(90deg);}
.animations .circle div:nth-child(5){transform:rotate(120deg);}
.animations .circle div:nth-child(6){transform:rotate(150deg);}
.animations .circle-bg{
position:absolute;left:50%;top:50%;width:18px;
height:18px;margin:-9px 0 0 -9px;background:#535353;border-radius:18px;
}


@keyframes load{
0%{opacity:0;}
100%{opacity:1;}
}
.animations .circle div:nth-child(1):before{animation:load 1.2s linear 0s infinite;}
.animations .circle div:nth-child(2):before{animation:load 1.2s linear 0.1s infinite;}
.animations .circle div:nth-child(3):before{animation:load 1.2s linear 0.2s infinite;}
.animations .circle div:nth-child(4):before{animation:load 1.2s linear 0.3s infinite;}

.animations .circle div:nth-child(1):after{animation:load 1.2s linear 0.6s infinite;}
.animations .circle div:nth-child(2):after{animation:load 1.2s linear 0.7s infinite;}
.animations .circle div:nth-child(3):after{animation:load 1.2s linear 0.8s infinite;}
.animations .circle div:nth-child(4):after{animation:load 1.2s linear 0.9s infinite;}

总结

以上动效其实都应用了css3中的@keyframes规则。它能创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,您可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字”from”和”to”,这是和0%到100%相同。