CSS3波形loading动画特效

css3动画 Loading 2017-06-22

控件介绍
这是一款使用CSS3制作的波形loading动画特效。这组波形loading动画特效共有11种波形动画,分别使用不同的CSS3 animation动画来实现。
浏览器兼容

支持IE10+

演示下载 1841
使用方法

使用方法

在页面中引入style.css文件。

1
<link rel="stylesheet" href="style.css" type="text/css">
HTML结构

每一个loading动画都是由一个<div>元素包裹10个子<div>元素组成。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="shaft-load">
  <div class="shaft1"></div>
  <div class="shaft2"></div>
  <div class="shaft3"></div>
  <div class="shaft4"></div>
  <div class="shaft5"></div>
  <div class="shaft6"></div>
  <div class="shaft7"></div>
  <div class="shaft8"></div>
  <div class="shaft9"></div>
  <div class="shaft10"></div>
</div>          
CSS样式

loading动画的通用样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
[class^="shaft-load"] {
  margin: 50px auto;
  width: 60px;
  height: 30px;
}
[class^="shaft-load"] > div {
  float: left;
  background: #893878;
  height: 100%;
  width: 5px;
  margin-right: 1px;
  display: inline-block;
}                

实现第一种波形动画的CSS样式如下:

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
52
53
54
55
56
57
58
59
60
[class^="shaft-load"] .shaft1 {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  -o-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
/* Shaft 1 */
.shaft-load > div {
  background-color: #5d8341;
  -webkit-animation: loading 1.5s infinite ease-in-out;
  -moz-animation: loading 1.5s infinite ease-in-out;
  -o-animation: loading 1.5s infinite ease-in-out;
  animation: loading 1.5s infinite ease-in-out;
  -webkit-transform: scaleY(0.05) translateX(-10px);
  -moz-transform: scaleY(0.05) translateX(-10px);
  -ms-transform: scaleY(0.05) translateX(-10px);
  -o-transform: scaleY(0.05) translateX(-10px);
  transform: scaleY(0.05) translateX(-10px);
}
 
@-webkit-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@-moz-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@-o-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}                

其它loading动画效果请参考下载文件。

本文转载请注明出处:http://www.zhuiye.com/detail_1401.html
评论区
  • 还没有评论,快来抢沙发吧!