• 进度条动画集合



    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               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               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               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               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             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              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              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              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          }
  • 相关阅读:
    celery定时器
    基于Django的Rest Framework框架的视图组件
    Django的缓存机制
    Django中的跨域请求问题
    基于Django的Rest Framework框架的url控制器
    基于Django的Rest Framework框架的响应器
    基于Django的Rest Framework框架的分页组件
    基于Django的Rest Framework框架的解析器
    虚拟机下CentOS7开启SSH连接
    Vue中computed和watch的区别
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9436314.html
Copyright © 2020-2023  润新知