进度条动画集合 


 1  <style>
 2          html,body{
 3              margin: 100px;
 4              padding: 0;
 5              width: 100%;
 6              height: 100%;
 7              background: #ed5565;
 8          }
 9         .ball-clip-rotate>div{
10             background: #fff;
11         /*//动画前的大小*/
12             width: 15px;
13             height: 15px;
14             border-radius:100%;
15             margin: 2px;
16             -webkit-animation-fill-mode:both;
17             animation-fill-mode:both;
18             border:2px solid #fff;
19             /*border-bottom-color是用来留旋转时候的缺口的*/
20             border-bottom-color:transparent;
21             height: 25px;
22             width: 25px;
23             background: transparent;
24             -webkit-animation:rotate .75s 0s linear infinite;
25             animationn:rotate .75s 0s linear infinite;
26         }
27          @keyframes rotate {
28              0%{
29                  transform:rotate(0deg) scale(1)
30              }
31              50%{
32                  transform: rotate(180deg) scale(.6);
33              }
34              100%{
35                  transform: rotate(360deg) scale(1);
36              }
37          }
38 
39     </style>
40 
41  <div class="loader-inner ball-clip-rotate">
42         <div></div>
43     </div>

 

 1 //html
 2  <div class="loader">
 3            <div class="loader-inner ball-pulse">
 4                <div></div>
 5                <div></div>
 6                <div></div>
 7            </div>
 8        </div>
 9 //css
10   @keyframes scale {
11              30% {
12                  -webkit-transform: scale(0.3);
13                  transform: scale(0.3); }
14 
15              100% {
16                  -webkit-transform: scale(1);
17                  transform: scale(1); } }
18          .ball-pulse > div:nth-child(0) {
19              -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
20              animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
21          .ball-pulse > div:nth-child(1) {
22              -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
23              animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
24          .ball-pulse > div:nth-child(2) {
25              -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
26              animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
27          .ball-pulse > div:nth-child(3) {
28              -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
29              animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
30          .ball-pulse > div {
31              background-color: #fff;
32              width: 15px;
33              height: 15px;
34              border-radius: 100%;
35              margin: 2px;
36              -webkit-animation-fill-mode: both;
37              animation-fill-mode: both;
38              display: inline-block; }

 

  1  <style>
  2          html,body{
  3              margin: 100px;
  4              padding: 0;
  5              width: 100%;
  6              height: 100%;
  7              background: #ed5565;
  8          }
  9 
 10          @-webkit-keyframes ball-grid-pulse {
 11              0% {
 12                  -webkit-transform: scale(1);
 13                  transform: scale(1); }
 14 
 15              50% {
 16                  -webkit-transform: scale(0.5);
 17                  transform: scale(0.5);
 18                  opacity: 0.7; }
 19 
 20              100% {
 21                  -webkit-transform: scale(1);
 22                  transform: scale(1);
 23                  opacity: 1; } }
 24 
 25          @keyframes ball-grid-pulse {
 26              0% {
 27                  -webkit-transform: scale(1);
 28                  transform: scale(1); }
 29 
 30              50% {
 31                  -webkit-transform: scale(0.5);
 32                  transform: scale(0.5);
 33                  opacity: 0.7; }
 34 
 35              100% {
 36                  -webkit-transform: scale(1);
 37                  transform: scale(1);
 38                  opacity: 1; } }
 39 
 40          .ball-grid-pulse {
 41              width: 57px; }
 42          .ball-grid-pulse > div:nth-child(1) {
 43              -webkit-animation-delay: -0.06s;
 44              animation-delay: -0.06s;
 45              -webkit-animation-duration: 0.72s;
 46              animation-duration: 0.72s; }
 47          .ball-grid-pulse > div:nth-child(2) {
 48              -webkit-animation-delay: 0.25s;
 49              animation-delay: 0.25s;
 50              -webkit-animation-duration: 1.02s;
 51              animation-duration: 1.02s; }
 52          .ball-grid-pulse > div:nth-child(3) {
 53              -webkit-animation-delay: -0.17s;
 54              animation-delay: -0.17s;
 55              -webkit-animation-duration: 1.28s;
 56              animation-duration: 1.28s; }
 57          .ball-grid-pulse > div:nth-child(4) {
 58              -webkit-animation-delay: 0.48s;
 59              animation-delay: 0.48s;
 60              -webkit-animation-duration: 1.42s;
 61              animation-duration: 1.42s; }
 62          .ball-grid-pulse > div:nth-child(5) {
 63              -webkit-animation-delay: 0.31s;
 64              animation-delay: 0.31s;
 65              -webkit-animation-duration: 1.45s;
 66              animation-duration: 1.45s; }
 67          .ball-grid-pulse > div:nth-child(6) {
 68              -webkit-animation-delay: 0.03s;
 69              animation-delay: 0.03s;
 70              -webkit-animation-duration: 1.18s;
 71              animation-duration: 1.18s; }
 72          .ball-grid-pulse > div:nth-child(7) {
 73              -webkit-animation-delay: 0.46s;
 74              animation-delay: 0.46s;
 75              -webkit-animation-duration: 0.87s;
 76              animation-duration: 0.87s; }
 77          .ball-grid-pulse > div:nth-child(8) {
 78              -webkit-animation-delay: 0.78s;
 79              animation-delay: 0.78s;
 80              -webkit-animation-duration: 1.45s;
 81              animation-duration: 1.45s; }
 82          .ball-grid-pulse > div:nth-child(9) {
 83              -webkit-animation-delay: 0.45s;
 84              animation-delay: 0.45s;
 85              -webkit-animation-duration: 1.06s;
 86              animation-duration: 1.06s; }
 87          .ball-grid-pulse > div {
 88              background-color: #fff;
 89              width: 15px;
 90              height: 15px;
 91              border-radius: 100%;
 92              margin: 2px;
 93              -webkit-animation-fill-mode: both;
 94              animation-fill-mode: both;
 95              display: inline-block;
 96              float: left;
 97              -webkit-animation-name: ball-grid-pulse;
 98              animation-name: ball-grid-pulse;
 99              -webkit-animation-iteration-count: infinite;
100              animation-iteration-count: infinite;
101              -webkit-animation-delay: 0;
102              animation-delay: 0; }
103 
104     </style>
105 
106 
107 <div class="loader">
108        <div class="loader-inner ball-grid-pulse">
109            <div></div>
110            <div></div>
111            <div></div>
112            <div></div>
113            <div></div>
114            <div></div>
115            <div></div>
116            <div></div>
117            <div></div>
118        </div>
119    </div>

 1    html,body{
 2              margin: 100px;
 3              padding: 0;
 4              width: 100%;
 5              height: 100%;
 6              background: #ed5565;
 7          }
 8 
 9          @keyframes scale {
10              30% {
11                  -webkit-transform: scale(0.3);
12                  transform: scale(0.3); }
13 
14              100% {
15                  -webkit-transform: scale(1);
16                  transform: scale(1); }
17          }
18          @keyframes rotate {
19              0% {
20                  -webkit-transform: rotate(0deg) scale(1);
21                  transform: rotate(0deg) scale(1); }
22 
23              50% {
24                  -webkit-transform: rotate(180deg) scale(0.5);
25                  transform: rotate(180deg) scale(0.5); }
26 
27              100% {
28                  -webkit-transform: rotate(360deg) scale(1);
29                  transform: rotate(360deg) scale(1); } }
30          .ball-clip-rotate-pulse{
31              position: relative;
32              /*translateY是Y轴移动15度*/
33              -webkit-transform: translateY(-15px);
34              -ms-transform: translateY(-15px);
35              transform: translateY(-15px);
36          }
37          .ball-clip-rotate-pulse>div{
38              -webkit-animation-fill-mode: both;
39              animation-fill-mode: both;
40              position: absolute;
41              top: 0px;
42              left: 0px;
43              border-radius: 100%;
44          }
45          .ball-clip-rotate-pulse > div:first-child {
46              background: #fff;
47              height: 16px;
48              width: 16px;
49              top: 9px;
50              left: 9px;
51              -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
52              animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; }
53          .ball-clip-rotate-pulse>div:last-child{
54              position: absolute;
55              width: 30px;
56              height: 30px;
57              background: transparent;
58              border:2px solid;
59              border-color: #fff transparent #fff transparent;
60              -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
61              animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
62              -webkit-animation-duration: 1s;
63              animation-duration: 1s;
64 
65          }
66 
67 
68 
69   <div class="loader-inner ball-clip-rotate-pulse">
70         <div></div>
71         <div></div>
72     </div>

 

 

 1    @-webkit-keyframes square-spin {
 2              25% {
 3                  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
 4                  transform: perspective(100px) rotateX(180deg) rotateY(0);
 5              }
 6 
 7              50% {
 8                  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
 9                  transform: perspective(100px) rotateX(180deg) rotateY(180deg);
10              }
11 
12              75% {
13                  -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
14                  transform: perspective(100px) rotateX(0) rotateY(180deg);
15              }
16 
17              100% {
18                  -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
19                  transform: perspective(100px) rotateX(0) rotateY(0);
20              }
21          }
22 
23          @keyframes square-spin {
24              25% {
25                  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
26                  transform: perspective(100px) rotateX(180deg) rotateY(0);
27              }
28 
29              50% {
30                  -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
31                  transform: perspective(100px) rotateX(180deg) rotateY(180deg);
32              }
33 
34              75% {
35                  -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
36                  transform: perspective(100px) rotateX(0) rotateY(180deg);
37              }
38 
39              100% {
40                  -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
41                  transform: perspective(100px) rotateX(0) rotateY(0);
42              }
43          }
44        .square-spin >div{
45            -webkit-animation-fill-mode: both;
46            animation-fill-mode:both;
47            width: 50px;
48            height: 50px;
49            background: #fff;
50            border:1px solid red;
51            -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
52            animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
53        }
54 
55 
56 <div class="loader">
57     <div class="loader-inner square-spin">
58         <div></div>
59     </div>
60 </div>

 

 1  @keyframes rotate {
 2              0% {
 3                  -webkit-transform: rotate(0deg) scale(1);
 4                  transform: rotate(0deg) scale(1);
 5              }
 6 
 7              50% {
 8                  -webkit-transform: rotate(180deg) scale(0.6);
 9                  transform: rotate(180deg) scale(0.6);
10              }
11 
12              100% {
13                  -webkit-transform: rotate(360deg) scale(1);
14                  transform: rotate(360deg) scale(1);
15              }
16          }
17             .ball-clip-rotate-multiple{
18                 position: relative;
19             }
20         .ball-clip-rotate-multiple>div{
21             -webkit-animation-fill-mode: both;
22             animation-fill-mode:both;
23             position: absolute;
24             left: 0;
25             top: 0;
26             border:2px solid #fff;
27             border-bottom-color: transparent;
28             border-top-color: transparent;
29             border-radius: 100%;
30             height: 35px;
31             width: 35px;
32             /*里外两个的动画在一起*/
33             -webkit-animation:rotate 1s 0s ease-in-out infinite;
34             animation:rotate 1s  0s ease-in-out infinite;
35         }
36         .ball-clip-rotate-multiple>div:last-child{
37             top: 10px;
38             left: 10px;
39             width: 15px;
40             height: 15px;
41             border-color: #fff transparent #fff transparent;
42             -webkit-animation-duration: .5s;
43             animation-duration: .5s;
44             -webkit-animation-direction:reverse;
45             animation-direction: reverse;
46 
47         }
48 
49 
50 
51 <div class="loader-inner ball-clip-rotate-multiple">
52         <div></div>
53         <div></div>
54     </div>

  1 <div class="loader">
  2     <div class="loader-inner ball-pulse-rise">
  3         <div></div>
  4         <div></div>
  5         <div></div>
  6         <div></div>
  7         <div></div>
  8     </div>
  9 </div>
 10 
 11 
 12 
 13       /*奇数*/
 14          @-webkit-keyframes ball-pulse-rise-odd {
 15              0% {
 16                  -webkit-transform: scale(0.4);
 17                  transform: scale(0.4);
 18              }
 19 
 20              25% {
 21                  -webkit-transform: translateY(30px);
 22                  transform: translateY(30px);
 23              }
 24 
 25              50% {
 26                  -webkit-transform: scale(1.1);
 27                  transform: scale(1.1);
 28              }
 29 
 30              75% {
 31                  -webkit-transform: translateY(-30px);
 32                  transform: translateY(-30px);
 33              }
 34 
 35              100% {
 36                  -webkit-transform: translateY(0);
 37                  transform: translateY(0);
 38                  -webkit-transform: scale(0.75);
 39                  transform: scale(0.75);
 40              }
 41          }
 42          @keyframes ball-pulse-rise-odd {
 43              0% {
 44                  -webkit-transform: scale(0.4);
 45                  transform: scale(0.4);
 46              }
 47 
 48              25% {
 49                  -webkit-transform: translateY(30px);
 50                  transform: translateY(30px);
 51              }
 52 
 53              50% {
 54                  -webkit-transform: scale(1.1);
 55                  transform: scale(1.1);
 56              }
 57 
 58              75% {
 59                  -webkit-transform: translateY(-30px);
 60                  transform: translateY(-30px);
 61              }
 62 
 63              100% {
 64                  -webkit-transform: translateY(0);
 65                  transform: translateY(0);
 66                  -webkit-transform: scale(0.75);
 67                  transform: scale(0.75);
 68              }
 69          }
 70          /*偶数*/
 71          @-webkit-keyframes ball-pulse-rise-even {
 72              0% {
 73                  -webkit-transform: scale(1.1);
 74                  transform: scale(1.1);
 75              }
 76 
 77              25% {
 78                  -webkit-transform: translateY(-30px);
 79                  transform: translateY(-30px);
 80              }
 81 
 82              50% {
 83                  -webkit-transform: scale(0.4);
 84                  transform: scale(0.4);
 85              }
 86 
 87              75% {
 88                  -webkit-transform: translateY(30px);
 89                  transform: translateY(30px);
 90              }
 91 
 92              100% {
 93                  -webkit-transform: translateY(0);
 94                  transform: translateY(0);
 95                  -webkit-transform: scale(1);
 96                  transform: scale(1);
 97              }
 98          }
 99          @keyframes ball-pulse-rise-even {
100              0% {
101                  -webkit-transform: scale(1.1);
102                  transform: scale(1.1);
103              }
104 
105              25% {
106                  -webkit-transform: translateY(-30px);
107                  transform: translateY(-30px);
108              }
109 
110              50% {
111                  -webkit-transform: scale(0.4);
112                  transform: scale(0.4);
113              }
114 
115              75% {
116                  -webkit-transform: translateY(30px);
117                  transform: translateY(30px);
118              }
119 
120              100% {
121                  -webkit-transform: translateY(0);
122                  transform: translateY(0);
123                  -webkit-transform: scale(1);
124                  transform: scale(1);
125              }
126          }
127          .ball-pulse-rise  > div{
128             width: 15px;
129             height: 15px;
130             background: #fff;
131             border-radius: 100%;
132             margin: 2px;
133             display: inline-block;
134             -webkit-animation-fill-mode: both;
135             animation-fill-mode:both;
136             -webkit-animation-duration: 1s;
137             animation-duration: 1s;
138             -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
139             animation-timing-function: cubic-bezier(.15, .46, .9, .6);
140             -webkit-animation-iteration-count: infinite;
141             animation-iteration-count: infinite;
142             -webkit-animation-delay:0;
143             animation-delay:0;
144         }
145         .ball-pulse-rise >div:nth-child(2n){
146             -webkit-animation-name:bull-pulse-rise-even;
147             animation-name: ball-pulse-rise-even;
148         }
149          .ball-pulse-rise > div:nth-child(2n-1) {
150              -webkit-animation-name: ball-pulse-rise-odd;
151              animation-name: ball-pulse-rise-odd;
152          }

 

posted @ 2018-08-07 12:29  前端极客  阅读(676)  评论(0)  编辑  收藏  举报