文档章节

进度条动画集合

o
 osc_4nmshwhm
发布于 2018/08/07 12:29
字数 1756
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>


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          }

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
9款极具创意的HTML5/CSS3进度条动画

今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧。 1、HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这...

行者孙
2014/03/25
2.2K
0
amazeui学习笔记--css(常用组件13)--进度条Progress

amazeui学习笔记--css(常用组件13)--进度条Progress 一、总结 1、进度条基本使用:进度条组件, 为容器, 为进度显示信息。 <div class="am-progress"><div class="am-progress-bar" styl......

osc_i1wpn0ru
2018/05/09
9
0
HTML5 Loading动画特效集锦

1、HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在c...

青云_K
2014/07/26
222
0
【常见】CSS3进度条Loading动画(一)

现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现。CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loading...

osc_etp9xzp8
2019/08/23
1
0
6款新颖的jQuery和CSS3进度条插件

现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了。下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助。 1、不...

ruby_chen
2013/03/05
50
0

没有更多内容

加载失败,请刷新页面

加载更多

自从尝了 Rust,Java 突然不香了

Rust 是软件行业中相对而言比较新的一门编程语言,如果从语法上来比较,该语言与 C++ 其实非常类似,但从另一方面而言,Rust 能更高效地提供许多功能来保证性能和安全。而且,Rust 还能在无需...

osc_k3vwonkw
8分钟前
0
0
Java 高级 面试题 及 参考答案

一、面试题基础总结 1、 JVM结构原理、GC工作机制详解 答:具体参照:JVM结构、GC工作机制详解 ,说到GC,记住两点:1、GC是负责回收所有无任何引用对象的内存空间。 注意:垃圾回收回收的是无...

FH-Admin
8分钟前
14
0
机器学习中的AUC-ROC曲线

作者|ANIRUDDHA BHANDARI 编译|VK 来源|Analytics Vidhya AUC-ROC曲线 你已经建立了你的机器学习模型-那么接下来呢?你需要对它进行评估,并验证它有多好(或有多坏),这样你就可以决定是否...

osc_bg8v9gvf
10分钟前
8
0
音视频(消息)应用场景 :连麦交友例子

实现一个小例子: 效果类似唱吧APP里的 连麦交友功能,音视频,IM 及音视频 SDK参考融云服务商。 没有印象的可以搜索 ’连麦’ 关键字在 应用商店下载一款 连麦的软件 体验下 业务方面的需求...

T型人才追梦者
11分钟前
7
0
逛淘宝天猫想到SSO单点登录

我的原文地址:https://mp.weixin.qq.com/s/77xukPDlgkKnYpwu4LrqaA

osc_yy65eb2q
11分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部