先看下效果
全部代码贴出，自己粘贴调试测试：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css加载样式</title> 6 </head> 7 <style> 8 /*效果一*/ 9 .spinner9 { margin: 100px auto; width: 90px; height: 60px; text-align: center; font-size: 10px; } .spinner9 > div { 10 background-color: #67CF22; 11 height: 100%; 12 width: 6px; 13 display: inline-block; 14 -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 15 animation: stretchdelay 1.2s infinite ease-in-out; 16 } 17 .spinner9 .rect2 { 18 -webkit-animation-delay: -1.1s; 19 animation-delay: -1.1s; 20 } 21 .spinner9 .rect3 { 22 -webkit-animation-delay: -1.0s; 23 animation-delay: -1.0s; 24 } 25 .spinner9 .rect4 { 26 -webkit-animation-delay: -0.9s; 27 animation-delay: -0.9s; 28 } 29 .spinner9 .rect5 { 30 -webkit-animation-delay: -0.8s; 31 animation-delay: -0.8s; 32 } 33 @-webkit-keyframes stretchdelay { 34 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 35 20% { -webkit-transform: scaleY(1.0) } 36 } 37 @keyframes stretchdelay { 38 0%, 40%, 100% { 39 transform: scaleY(0.4); 40 -webkit-transform: scaleY(0.4); 41 } 20% { 42 transform: scaleY(1.0); 43 -webkit-transform: scaleY(1.0); 44 } 45 } 46 47 /*效果二*/ 48 .spinner1 { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } 49 /*效果三*/ 50 .spinner2 { width: 60px; height: 60px; background: none; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #67CF22; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } 51 52 /*效果四*/ 53 .spinner3 { margin: 100px auto; width: 32px; height: 32px; position: relative; } .cube1, .cube2 { background-color: #67CF22; width: 30px; height: 30px; position: absolute; top: 0; left: 0; -webkit-animation: cubemove 1.8s infinite ease-in-out; animation: cubemove 1.8s infinite ease-in-out; } .cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } } 54 /*效果五*/ 55 .spinner5 { margin: 100px auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #67CF22; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } 56 /*效果六*/ 57 .spinner6 { margin: 100px auto 0; width: 150px; text-align: center; } .spinner6 > div { 58 width: 30px; 59 height: 30px; 60 background-color: #67CF22; 61 border-radius: 100%; 62 display: inline-block; 63 -webkit-animation: bouncedelay 1.4s infinite ease-in-out; 64 animation: bouncedelay 1.4s infinite ease-in-out; 65 /* Prevent first frame from flickering when animation starts */ 66 -webkit-animation-fill-mode: both; 67 animation-fill-mode: both; 68 } 69 .spinner6 .bounce1 { 70 -webkit-animation-delay: -0.32s; 71 animation-delay: -0.32s; 72 } 73 .spinner6 .bounce2 { 74 -webkit-animation-delay: -0.16s; 75 animation-delay: -0.16s; 76 } 77 @-webkit-keyframes bouncedelay { 78 0%, 80%, 100% { -webkit-transform: scale(0.0) } 79 40% { -webkit-transform: scale(1.0) } 80 } 81 @keyframes bouncedelay { 82 0%, 80%, 100% { 83 transform: scale(0.0); 84 -webkit-transform: scale(0.0); 85 } 40% { 86 transform: scale(1.0); 87 -webkit-transform: scale(1.0); 88 } 89 } 90 91 /*效果七*/ 92 .spinner { width: 90px; height: 90px; margin: 100px auto; background-color: #67CF22; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } } 93 94 /*效果八*/ 95 .spinner8 { margin: 100px auto; width: 60px; height: 60px; position: relative; } .container1 > div, .container2 > div, .container3 > div { 96 width: 16px; 97 height: 16px; 98 background-color: #67CF22; 99 border-radius: 100%; 100 position: absolute; 101 -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 102 animation: bouncedelay 1.2s infinite ease-in-out; 103 /* Prevent first frame from flickering when animation starts */ 104 -webkit-animation-fill-mode: both; 105 animation-fill-mode: both; 106 } 107 .spinner8 .spinner-container { 108 position: absolute; 109 width: 100%; 110 height: 100%; 111 } 112 .container2 { 113 -webkit-transform: rotateZ(45deg); 114 transform: rotateZ(45deg); 115 } 116 .container3 { 117 -webkit-transform: rotateZ(90deg); 118 transform: rotateZ(90deg); 119 } 120 .circle1 { top: 0; left: 0; } 121 .circle2 { top: 0; right: 0; } 122 .circle3 { right: 0; bottom: 0; } 123 .circle4 { left: 0; bottom: 0; } 124 .container2 .circle1 { 125 -webkit-animation-delay: -1.1s; 126 animation-delay: -1.1s; 127 } 128 .container3 .circle1 { 129 -webkit-animation-delay: -1.0s; 130 animation-delay: -1.0s; 131 } 132 .container1 .circle2 { 133 -webkit-animation-delay: -0.9s; 134 animation-delay: -0.9s; 135 } 136 .container2 .circle2 { 137 -webkit-animation-delay: -0.8s; 138 animation-delay: -0.8s; 139 } 140 .container3 .circle2 { 141 -webkit-animation-delay: -0.7s; 142 animation-delay: -0.7s; 143 } 144 .container1 .circle3 { 145 -webkit-animation-delay: -0.6s; 146 animation-delay: -0.6s; 147 } 148 .container2 .circle3 { 149 -webkit-animation-delay: -0.5s; 150 animation-delay: -0.5s; 151 } 152 .container3 .circle3 { 153 -webkit-animation-delay: -0.4s; 154 animation-delay: -0.4s; 155 } 156 .container1 .circle4 { 157 -webkit-animation-delay: -0.3s; 158 animation-delay: -0.3s; 159 } 160 .container2 .circle4 { 161 -webkit-animation-delay: -0.2s; 162 animation-delay: -0.2s; 163 } 164 .container3 .circle4 { 165 -webkit-animation-delay: -0.1s; 166 animation-delay: -0.1s; 167 } 168 @-webkit-keyframes bouncedelay { 169 0%, 80%, 100% { -webkit-transform: scale(0.0) } 170 40% { -webkit-transform: scale(1.0) } 171 } 172 @keyframes bouncedelay { 173 0%, 80%, 100% { 174 transform: scale(0.0); 175 -webkit-transform: scale(0.0); 176 } 40% { 177 transform: scale(1.0); 178 -webkit-transform: scale(1.0); 179 } 180 } 181 182 183 </style> 184 <body> 185 <!-- 效果一 --> 186 <div class="spinner9"> 187 <div class="rect1"> 188 189 </div> 190 <div class="rect2"> 191 192 </div> 193 <div class="rect3"> 194 195 </div> 196 <div class="rect4"> 197 198 </div> 199 <div class="rect5"> 200 201 </div> 202 </div> 203 <!-- 效果二 --> 204 <div class="spinner1"></div> 205 206 <!-- 效果三 --> 207 <div class="spinner2"> 208 <div class="double-bounce1"> 209 210 </div> 211 <div class="double-bounce2"> 212 213 </div> 214 </div> 215 <!-- 效果四 --> 216 <div class="spinner3"> 217 <div class="cube1"> 218 219 </div> 220 <div class="cube2"> 221 222 </div> 223 </div> 224 <!-- 效果五 --> 225 <div class="spinner5"> 226 <div class="dot1"> 227 228 </div> 229 <div class="dot2"> 230 231 </div> 232 </div> 233 <!-- 效果六 --> 234 <div class="spinner6"> 235 <div class="bounce1"> 236 237 </div> 238 <div class="bounce2"> 239 240 </div> 241 <div class="bounce3"> 242 243 </div> 244 </div> 245 <!-- 效果七 --> 246 <div class="spinner"> 247 248 </div> 249 <!-- 效果八 --> 250 <div class="spinner8"> 251 <div class="spinner-container container1"> 252 <div class="circle1"> 253 254 </div> 255 <div class="circle2"> 256 257 </div> 258 <div class="circle3"> 259 260 </div> 261 <div class="circle4"> 262 263 </div> 264 </div> 265 <div class="spinner-container container2"> 266 <div class="circle1"> 267 268 </div> 269 <div class="circle2"> 270 271 </div> 272 <div class="circle3"> 273 274 </div> 275 <div class="circle4"> 276 277 </div> 278 </div> 279 <div class="spinner-container container3"> 280 <div class="circle1"> 281 282 </div> 283 <div class="circle2"> 284 285 </div> 286 <div class="circle3"> 287 288 </div> 289 <div class="circle4"> 290 291 </div> 292 </div> 293 </div> 294 295 296 </body> 297 </html>