10種CSS3實現的loading動畫，挑一個走吧？
這篇文章主要介紹了10種CSS3實現的loading動畫，幫助大家更好的美化自身網頁，完成需求，感興趣的朋友可以瞭解下。
HTML：
1 <body> 2 <div class="content"> 3 <h3>CSS3 Loading animations</h3> 4 <div class="load-wrapp"> 5 <div class="load-1"> 6 <p>Loading 1</p> 7 <divclass="line"></div> 8 <div class="line"></div> 9 <div class="line"></div> 10 </div> 11 </div> 12 <div class="load-wrapp"> 13 <div class="load-2"> 14 <p>Loading 2</p> 15 <div class="line"></div> 16 <div class="line"></div> 17 <div class="line"></div> 18 </div> 19 </div> 20 <div class="load-wrapp"> 21 <div class="load-3"> 22 <p>Loading 3</p> 23 <div class="line"></div> 24 <div class="line"></div> 25 <div class="line"></div> 26 </div> 27 </div> 28 <div class="load-wrapp"> 29 <!-- Loading 4 don't work on firefox because of the border-radius and the "dashed" style. --> 30 <div class="load-4"> 31 <p>Loading 4</p> 32 <div class="ring-1"></div> 33 </div> 34 </div> 35 <div class="load-wrapp"> 36 <div class="load-5"> 37 <p>Loading 5</p> 38 <div class="ring-2"> 39 <div class="ball-holder"> 40 <div class="ball"></div> 41 </div> 42 </div> 43 </div> 44 </div> 45 <div class="load-wrapp"> 46 <div class="load-6"> 47 <p>Loading 6</p> 48 <div class="letter-holder"> 49 <div class="l-1 letter">L</div> 50 <div class="l-2 letter">o</div> 51 <div class="l-3 letter">a</div> 52 <div class="l-4 letter">d</div> 53 <div class="l-5 letter">i</div> 54 <div class="l-6 letter">n</div> 55 <div class="l-7 letter">g</div> 56 <div class="l-8 letter">.</div> 57 <div class="l-9 letter">.</div> 58 <div class="l-10 letter">.</div> 59 </div> 60 </div> 61 </div> 62 <div class="load-wrapp"> 63 <div class="load-7"> 64 <p>Loading 7</p> 65 <div class="square-holder"> 66 <div class="square"></div> 67 </div> 68 </div> 69 </div> 70 <div class="load-wrapp"> 71 <div class="load-8"> 72 <p>Loading 8</p> 73 <div class="line"></div> 74 </div> 75 </div> 76 <div class="load-wrapp"> 77 <div class="load-9"> 78 <p>Loading 9</p> 79 <div class="spinner"> 80 <div class="bubble-1"></div> 81 <div class="bubble-2"></div> 82 </div> 83 </div> 84 </div> 85 <div class="load-wrapp"> 86 <div class="load-10"> 87 <p>Loading 10</p> 88 <div class="bar"></div> 89 </div> 90 </div> 91 </div> 92 <div class="clear"></div> 93 </body>
CSS3：
1 /* ----------------------------------------- 2 =Default css to make the demo more pretty 3 -------------------------------------------- */ 4 5 body { 6 margin: 0 auto; 7 padding: 20px; 8 max-width: 1200px; 9 overflow-y: scroll; 10 font-family: "Open Sans", sans-serif; 11 font-weight: 400; 12 color: #777; 13 background-color: #f7f7f7; 14 -webkit-font-smoothing: antialiased; 15 -webkit-text-size-adjust: 100%; 16 -ms-text-size-adjust: 100%; 17 } 18 19 .content { 20 padding: 15px; 21 overflow: hidden; 22 background-color: #e7e7e7; 23 background-color: rgba(0, 0, 0, 0.06); 24 } 25 26 h1 { 27 padding-bottom: 15px; 28 border-bottom: 1px solid #d8d8d8; 29 font-weight: 600; 30 } 31 32 h1 span { 33 font-family: monospace, serif; 34 } 35 36 h3 { 37 padding-bottom: 20px; 38 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9); 39 } 40 41 p { 42 margin: 0; 43 padding: 10px 0; 44 color: #777; 45 } 46 47 .clear { 48 clear: both; 49 } 50 51 /* ----------------------------------------- 52 =CSS3 Loading animations 53 -------------------------------------------- */ 54 55 /* =Elements style 56 ---------------------- */ 57 .load-wrapp { 58 float: left; 59 width: 100px; 60 height: 100px; 61 margin: 0 10px 10px 0; 62 padding: 20px 20px 20px; 63 border-radius: 5px; 64 text-align: center; 65 background-color: #d8d8d8; 66 } 67 68 .load-wrapp p { 69 padding: 0 0 20px; 70 } 71 .load-wrapp:last-child { 72 margin-right: 0; 73 } 74 75 .line { 76 display: inline-block; 77 width: 15px; 78 height: 15px; 79 border-radius: 15px; 80 background-color: #4b9cdb; 81 } 82 83 .ring-1 { 84 width: 10px; 85 height: 10px; 86 margin: 0 auto; 87 padding: 10px; 88 border: 7px dashed #4b9cdb; 89 border-radius: 100%; 90 } 91 92 .ring-2 { 93 position: relative; 94 width: 45px; 95 height: 45px; 96 margin: 0 auto; 97 border: 4px solid #4b9cdb; 98 border-radius: 100%; 99 } 100 101 .ball-holder { 102 position: absolute; 103 width: 12px; 104 height: 45px; 105 left: 17px; 106 top: 0px; 107 } 108 109 .ball { 110 position: absolute; 111 top: -11px; 112 left: 0; 113 width: 16px; 114 height: 16px; 115 border-radius: 100%; 116 background: #4282b3; 117 } 118 119 .letter-holder { 120 padding: 16px; 121 } 122 123 .letter { 124 float: left; 125 font-size: 14px; 126 color: #777; 127 } 128 129 .square { 130 width: 12px; 131 height: 12px; 132 border-radius: 4px; 133 background-color: #4b9cdb; 134 } 135 136 .spinner { 137 position: relative; 138 width: 45px; 139 height: 45px; 140 margin: 0 auto; 141 } 142 143 .bubble-1, 144 .bubble-2 { 145 position: absolute; 146 top: 0; 147 width: 25px; 148 height: 25px; 149 border-radius: 100%; 150 background-color: #4b9cdb; 151 } 152 153 .bubble-2 { 154 top: auto; 155 bottom: 0; 156 } 157 158 .bar { 159 float: left; 160 width: 15px; 161 height: 6px; 162 border-radius: 2px; 163 background-color: #4b9cdb; 164 } 165 166 /* =Animate the stuff 167 ------------------------ */ 168 .load-1 .line:nth-last-child(1) { 169 animation: loadingA 1.5s 1s infinite; 170 } 171 .load-1 .line:nth-last-child(2) { 172 animation: loadingA 1.5s 0.5s infinite; 173 } 174 .load-1 .line:nth-last-child(3) { 175 animation: loadingA 1.5s 0s infinite; 176 } 177 178 .load-2 .line:nth-last-child(1) { 179 animation: loadingB 1.5s 1s infinite; 180 } 181 .load-2 .line:nth-last-child(2) { 182 animation: loadingB 1.5s 0.5s infinite; 183 } 184 .load-2 .line:nth-last-child(3) { 185 animation: loadingB 1.5s 0s infinite; 186 } 187 188 .load-3 .line:nth-last-child(1) { 189 animation: loadingC 0.6s 0.1s linear infinite; 190 } 191 .load-3 .line:nth-last-child(2) { 192 animation: loadingC 0.6s 0.2s linear infinite; 193 } 194 .load-3 .line:nth-last-child(3) { 195 animation: loadingC 0.6s 0.3s linear infinite; 196 } 197 198 .load-4 .ring-1 { 199 animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite; 200 } 201 202 .load-5 .ball-holder { 203 animation: loadingE 1.3s linear infinite; 204 } 205 206 .load-6 .letter { 207 animation-name: loadingF; 208 animation-duration: 1.6s; 209 animation-iteration-count: infinite; 210 animation-direction: linear; 211 } 212 213 .l-1 { 214 animation-delay: 0.48s; 215 } 216 .l-2 { 217 animation-delay: 0.6s; 218 } 219 .l-3 { 220 animation-delay: 0.72s; 221 } 222 .l-4 { 223 animation-delay: 0.84s; 224 } 225 .l-5 { 226 animation-delay: 0.96s; 227 } 228 .l-6 { 229 animation-delay: 1.08s; 230 } 231 .l-7 { 232 animation-delay: 1.2s; 233 } 234 .l-8 { 235 animation-delay: 1.32s; 236 } 237 .l-9 { 238 animation-delay: 1.44s; 239 } 240 .l-10 { 241 animation-delay: 1.56s; 242 } 243 244 .load-7 .square { 245 animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite; 246 } 247 248 .load-8 .line { 249 animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite; 250 } 251 252 .load-9 .spinner { 253 animation: loadingI 2s linear infinite; 254 } 255 .load-9 .bubble-1, 256 .load-9 .bubble-2 { 257 animation: bounce 2s ease-in-out infinite; 258 } 259 .load-9 .bubble-2 { 260 animation-delay: -1s; 261 } 262 263 .load-10 .bar { 264 animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite; 265 } 266 267 @keyframes loadingA { 268 0 { 269 height: 15px; 270 } 271 50% { 272 height: 35px; 273 } 274 100% { 275 height: 15px; 276 } 277 } 278 279 @keyframes loadingB { 280 0 { 281 width: 15px; 282 } 283 50% { 284 width: 35px; 285 } 286 100% { 287 width: 15px; 288 } 289 } 290 291 @keyframes loadingC { 292 0 { 293 transform: translate(0, 0); 294 } 295 50% { 296 transform: translate(0, 15px); 297 } 298 100% { 299 transform: translate(0, 0); 300 } 301 } 302 303 @keyframes loadingD { 304 0 { 305 transform: rotate(0deg); 306 } 307 50% { 308 transform: rotate(180deg); 309 } 310 100% { 311 transform: rotate(360deg); 312 } 313 } 314 315 @keyframes loadingE { 316 0 { 317 transform: rotate(0deg); 318 } 319 100% { 320 transform: rotate(360deg); 321 } 322 } 323 324 @keyframes loadingF { 325 0% { 326 opacity: 0; 327 } 328 100% { 329 opacity: 1; 330 } 331 } 332 333 @keyframes loadingG { 334 0% { 335 transform: translate(0, 0) rotate(0deg); 336 } 337 50% { 338 transform: translate(70px, 0) rotate(360deg); 339 } 340 100% { 341 transform: translate(0, 0) rotate(0deg); 342 } 343 } 344 345 @keyframes loadingH { 346 0% { 347 width: 15px; 348 } 349 50% { 350 width: 35px; 351 padding: 4px; 352 } 353 100% { 354 width: 15px; 355 } 356 } 357 358 @keyframes loadingI { 359 100% { 360 transform: rotate(360deg); 361 } 362 } 363 364 @keyframes bounce { 365 0%, 366 100% { 367 transform: scale(0); 368 } 369 50% { 370 transform: scale(1); 371 } 372 } 373 374 @keyframes loadingJ { 375 0%, 376 100% { 377 transform: translate(0, 0); 378 } 379 380 50% { 381 transform: translate(80px, 0); 382 background-color: #f5634a; 383 width: 25px; 384 } 385 }
/* ----------------------------------------- =Default css to make the demo more pretty-------------------------------------------- */
body { margin: 0 auto; padding: 20px; max-width: 1200px; overflow-y: scroll; font-family: "Open Sans", sans-serif; font-weight: 400; color: #777; background-color: #f7f7f7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
.content { padding: 15px; overflow: hidden; background-color: #e7e7e7; background-color: rgba(0, 0, 0, 0.06);}
h1 { padding-bottom: 15px; border-bottom: 1px solid #d8d8d8; font-weight: 600;}
h1 span { font-family: monospace, serif;}
h3 { padding-bottom: 20px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);}
p { margin: 0; padding: 10px 0; color: #777;}
.clear { clear: both;}
/* ----------------------------------------- =CSS3 Loading animations-------------------------------------------- */
/* =Elements style---------------------- */.load-wrapp { float: left; width: 100px; height: 100px; margin: 0 10px 10px 0; padding: 20px 20px 20px; border-radius: 5px; text-align: center; background-color: #d8d8d8;}
.load-wrapp p { padding: 0 0 20px;}.load-wrapp:last-child { margin-right: 0;}
.line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb;}
.ring-1 { width: 10px; height: 10px; margin: 0 auto; padding: 10px; border: 7px dashed #4b9cdb; border-radius: 100%;}
.ring-2 { position: relative; width: 45px; height: 45px; margin: 0 auto; border: 4px solid #4b9cdb; border-radius: 100%;}
.ball-holder { position: absolute; width: 12px; height: 45px; left: 17px; top: 0px;}
.ball { position: absolute; top: -11px; left: 0; width: 16px; height: 16px; border-radius: 100%; background: #4282b3;}
.letter-holder { padding: 16px;}
.letter { float: left; font-size: 14px; color: #777;}
.square { width: 12px; height: 12px; border-radius: 4px; background-color: #4b9cdb;}
.spinner { position: relative; width: 45px; height: 45px; margin: 0 auto;}
.bubble-1,.bubble-2 { position: absolute; top: 0; width: 25px; height: 25px; border-radius: 100%; background-color: #4b9cdb;}
.bubble-2 { top: auto; bottom: 0;}
.bar { float: left; width: 15px; height: 6px; border-radius: 2px; background-color: #4b9cdb;}
/* =Animate the stuff------------------------ */.load-1 .line:nth-last-child(1) { animation: loadingA 1.5s 1s infinite;}.load-1 .line:nth-last-child(2) { animation: loadingA 1.5s 0.5s infinite;}.load-1 .line:nth-last-child(3) { animation: loadingA 1.5s 0s infinite;}
.load-2 .line:nth-last-child(1) { animation: loadingB 1.5s 1s infinite;}.load-2 .line:nth-last-child(2) { animation: loadingB 1.5s 0.5s infinite;}.load-2 .line:nth-last-child(3) { animation: loadingB 1.5s 0s infinite;}
.load-3 .line:nth-last-child(1) { animation: loadingC 0.6s 0.1s linear infinite;}.load-3 .line:nth-last-child(2) { animation: loadingC 0.6s 0.2s linear infinite;}.load-3 .line:nth-last-child(3) { animation: loadingC 0.6s 0.3s linear infinite;}
.load-4 .ring-1 { animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-5 .ball-holder { animation: loadingE 1.3s linear infinite;}
.load-6 .letter { animation-name: loadingF; animation-duration: 1.6s; animation-iteration-count: infinite; animation-direction: linear;}
.l-1 { animation-delay: 0.48s;}.l-2 { animation-delay: 0.6s;}.l-3 { animation-delay: 0.72s;}.l-4 { animation-delay: 0.84s;}.l-5 { animation-delay: 0.96s;}.l-6 { animation-delay: 1.08s;}.l-7 { animation-delay: 1.2s;}.l-8 { animation-delay: 1.32s;}.l-9 { animation-delay: 1.44s;}.l-10 { animation-delay: 1.56s;}
.load-7 .square { animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-8 .line { animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
.load-9 .spinner { animation: loadingI 2s linear infinite;}.load-9 .bubble-1,.load-9 .bubble-2 { animation: bounce 2s ease-in-out infinite;}.load-9 .bubble-2 { animation-delay: -1s;}
.load-10 .bar { animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;}
@keyframes loadingA { 0 { height: 15px; } 50% { height: 35px; } 100% { height: 15px; }}
@keyframes loadingB { 0 { width: 15px; } 50% { width: 35px; } 100% { width: 15px; }}
@keyframes loadingC { 0 { transform: translate(0, 0); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, 0); }}
@keyframes loadingD { 0 { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }}
@keyframes loadingE { 0 { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
@keyframes loadingF { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes loadingG { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(70px, 0) rotate(360deg); } 100% { transform: translate(0, 0) rotate(0deg); }}
@keyframes loadingH { 0% { width: 15px; } 50% { width: 35px; padding: 4px; } 100% { width: 15px; }}
@keyframes loadingI { 100% { transform: rotate(360deg); }}
@keyframes bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); }}
@keyframes loadingJ { 0%, 100% { transform: translate(0, 0); }
50% { transform: translate(80px, 0); background-color: #f5634a; width: 25px; }}