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 }