【html】【17】高级篇--loading加载
参考: http://aspx.sc.chinaz.com/query.aspx?keyword=%E5%8A%A0%E8%BD%BD&classID=835
下载: http://sc.chinaz.com/jiaoben/140219222930.htm
html:
1 <div class="zzsc6"> //样式1 2 <div class="bounce1"></div> 3 <div class="bounce2"></div> 4 <div class="bounce3"></div> 5 </div> 6 7 <div class="zzsc8"> //样式2 8 <div class="zzsc8-container container1"> 9 <div class="circle1"></div> 10 <div class="circle2"></div> 11 <div class="circle3"></div> 12 <div class="circle4"></div> 13 </div> 14 <div class="zzsc8-container container2"> 15 <div class="circle1"></div> 16 <div class="circle2"></div> 17 <div class="circle3"></div> 18 <div class="circle4"></div> 19 </div> 20 <div class="zzsc8-container container3"> 21 <div class="circle1"></div> 22 <div class="circle2"></div> 23 <div class="circle3"></div> 24 <div class="circle4"></div> 25 </div> 26 </div>
css
1 .zzsc1 { 2 margin: 100px auto; 3 width: 50px; 4 height: 60px; 5 text-align: center; 6 font-size: 10px; 7 } 8 9 .zzsc1 > div { 10 background-color: #67CF22; 11 height: 100%; 12 width: 6px; 13 display: inline-block; 14 15 -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 16 animation: stretchdelay 1.2s infinite ease-in-out; 17 } 18 19 .zzsc1 .rect2 { 20 -webkit-animation-delay: -1.1s; 21 animation-delay: -1.1s; 22 } 23 24 .zzsc1 .rect3 { 25 -webkit-animation-delay: -1.0s; 26 animation-delay: -1.0s; 27 } 28 29 .zzsc1 .rect4 { 30 -webkit-animation-delay: -0.9s; 31 animation-delay: -0.9s; 32 } 33 34 .zzsc1 .rect5 { 35 -webkit-animation-delay: -0.8s; 36 animation-delay: -0.8s; 37 } 38 39 @-webkit-keyframes stretchdelay { 40 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 41 20% { -webkit-transform: scaleY(1.0) } 42 } 43 44 @keyframes stretchdelay { 45 0%, 40%, 100% { 46 transform: scaleY(0.4); 47 -webkit-transform: scaleY(0.4); 48 } 20% { 49 transform: scaleY(1.0); 50 -webkit-transform: scaleY(1.0); 51 } 52 } 53 54 .zzsc2 { 55 width: 60px; 56 height: 60px; 57 background-color: #67CF22; 58 59 margin: 100px auto; 60 -webkit-animation: rotateplane 1.2s infinite ease-in-out; 61 animation: rotateplane 1.2s infinite ease-in-out; 62 } 63 64 @-webkit-keyframes rotateplane { 65 0% { -webkit-transform: perspective(120px) } 66 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 67 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 68 } 69 70 @keyframes rotateplane { 71 0% { 72 transform: perspective(120px) rotateX(0deg) rotateY(0deg); 73 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 74 } 50% { 75 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 76 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 77 } 100% { 78 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 79 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 80 } 81 } 82 83 .zzsc3 { 84 width: 60px; 85 height: 60px; 86 87 position: relative; 88 margin: 100px auto; 89 } 90 91 .double-bounce1, .double-bounce2 { 92 width: 100%; 93 height: 100%; 94 border-radius: 50%; 95 background-color: #67CF22; 96 opacity: 0.6; 97 position: absolute; 98 top: 0; 99 left: 0; 100 101 -webkit-animation: bounce 2.0s infinite ease-in-out; 102 animation: bounce 2.0s infinite ease-in-out; 103 } 104 105 .double-bounce2 { 106 -webkit-animation-delay: -1.0s; 107 animation-delay: -1.0s; 108 } 109 110 @-webkit-keyframes bounce { 111 0%, 100% { -webkit-transform: scale(0.0) } 112 50% { -webkit-transform: scale(1.0) } 113 } 114 115 @keyframes bounce { 116 0%, 100% { 117 transform: scale(0.0); 118 -webkit-transform: scale(0.0); 119 } 50% { 120 transform: scale(1.0); 121 -webkit-transform: scale(1.0); 122 } 123 } 124 125 .zzsc4 { 126 margin: 100px auto; 127 width: 32px; 128 height: 32px; 129 position: relative; 130 } 131 132 .cube1, .cube2 { 133 background-color: #67CF22; 134 width: 30px; 135 height: 30px; 136 position: absolute; 137 top: 0; 138 left: 0; 139 140 -webkit-animation: cubemove 1.8s infinite ease-in-out; 141 animation: cubemove 1.8s infinite ease-in-out; 142 } 143 144 .cube2 { 145 -webkit-animation-delay: -0.9s; 146 animation-delay: -0.9s; 147 } 148 149 @-webkit-keyframes cubemove { 150 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 151 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 152 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 153 100% { -webkit-transform: rotate(-360deg) } 154 } 155 156 @keyframes cubemove { 157 25% { 158 transform: translateX(42px) rotate(-90deg) scale(0.5); 159 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 160 } 50% { 161 transform: translateX(42px) translateY(42px) rotate(-179deg); 162 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 163 } 50.1% { 164 transform: translateX(42px) translateY(42px) rotate(-180deg); 165 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 166 } 75% { 167 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 168 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 169 } 100% { 170 transform: rotate(-360deg); 171 /* www.datouwang.com */ 172 -webkit-transform: rotate(-360deg); 173 } 174 } 175 176 .zzsc5 { 177 margin: 100px auto; 178 width: 90px; 179 height: 90px; 180 position: relative; 181 text-align: center; 182 183 -webkit-animation: rotate 2.0s infinite linear; 184 animation: rotate 2.0s infinite linear; 185 } 186 187 .dot1, .dot2 { 188 width: 60%; 189 height: 60%; 190 display: inline-block; 191 position: absolute; 192 top: 0; 193 background-color: #67CF22; 194 border-radius: 100%; 195 196 -webkit-animation: bounce 2.0s infinite ease-in-out; 197 animation: bounce 2.0s infinite ease-in-out; 198 } 199 200 .dot2 { 201 top: auto; 202 bottom: 0px; 203 -webkit-animation-delay: -1.0s; 204 animation-delay: -1.0s; 205 } 206 207 @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} 208 @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} 209 210 @-webkit-keyframes bounce { 211 0%, 100% { -webkit-transform: scale(0.0) } 212 50% { -webkit-transform: scale(1.0) } 213 } 214 215 @keyframes bounce { 216 0%, 100% { 217 transform: scale(0.0); 218 -webkit-transform: scale(0.0); 219 } 50% { 220 transform: scale(1.0); 221 -webkit-transform: scale(1.0); 222 } 223 } 224 225 .zzsc6 { 226 margin: 100px auto 0; 227 width: 150px; 228 text-align: center; 229 } 230 231 .zzsc6 > div { 232 width: 30px; 233 height: 30px; 234 background-color: #67CF22; 235 236 border-radius: 100%; 237 display: inline-block; 238 -webkit-animation: bouncedelay 1.4s infinite ease-in-out; 239 animation: bouncedelay 1.4s infinite ease-in-out; 240 /* Prevent first frame from flickering when animation starts */ 241 -webkit-animation-fill-mode: both; 242 animation-fill-mode: both; 243 } 244 245 .zzsc6 .bounce1 { 246 -webkit-animation-delay: -0.32s; 247 animation-delay: -0.32s; 248 } 249 250 .zzsc6 .bounce2 { 251 -webkit-animation-delay: -0.16s; 252 animation-delay: -0.16s; 253 } 254 255 @-webkit-keyframes bouncedelay { 256 0%, 80%, 100% { -webkit-transform: scale(0.0) } 257 40% { -webkit-transform: scale(1.0) } 258 } 259 260 @keyframes bouncedelay { 261 0%, 80%, 100% { 262 transform: scale(0.0); 263 -webkit-transform: scale(0.0); 264 } 40% { 265 transform: scale(1.0); 266 -webkit-transform: scale(1.0); 267 } 268 } 269 270 .zzsc7 { 271 width: 40px; 272 height: 40px; 273 margin: 100px auto; 274 background-color: #333; 275 276 border-radius: 100%; 277 -webkit-animation: scaleout 1.0s infinite ease-in-out; 278 animation: scaleout 1.0s infinite ease-in-out; 279 } 280 281 @-webkit-keyframes scaleout { 282 0% { -webkit-transform: scale(0.0) } 283 100% { 284 -webkit-transform: scale(1.0); 285 opacity: 0; 286 } 287 } 288 289 @keyframes scaleout { 290 0% { 291 transform: scale(0.0); 292 -webkit-transform: scale(0.0); 293 } 100% { 294 transform: scale(1.0); 295 -webkit-transform: scale(1.0); 296 opacity: 0; 297 } 298 } 299 300 .zzsc8 { 301 margin: 100px auto; 302 width: 20px; 303 height: 20px; 304 position: relative; 305 } 306 307 .container1 > div, .container2 > div, .container3 > div { 308 width: 6px; 309 height: 6px; 310 background-color: #333; 311 312 border-radius: 100%; 313 position: absolute; 314 -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 315 animation: bouncedelay 1.2s infinite ease-in-out; 316 -webkit-animation-fill-mode: both; 317 animation-fill-mode: both; 318 } 319 320 .zzsc8 .zzsc8-container { 321 position: absolute; 322 width: 100%; 323 height: 100%; 324 } 325 326 .container2 { 327 -webkit-transform: rotateZ(45deg); 328 transform: rotateZ(45deg); 329 } 330 331 .container3 { 332 -webkit-transform: rotateZ(90deg); 333 transform: rotateZ(90deg); 334 } 335 336 .circle1 { top: 0; left: 0; } 337 .circle2 { top: 0; right: 0; } 338 .circle3 { right: 0; bottom: 0; } 339 .circle4 { left: 0; bottom: 0; } 340 341 .container2 .circle1 { 342 -webkit-animation-delay: -1.1s; 343 animation-delay: -1.1s; 344 } 345 346 .container3 .circle1 { 347 -webkit-animation-delay: -1.0s; 348 animation-delay: -1.0s; 349 } 350 351 .container1 .circle2 { 352 -webkit-animation-delay: -0.9s; 353 animation-delay: -0.9s; 354 } 355 356 .container2 .circle2 { 357 -webkit-animation-delay: -0.8s; 358 animation-delay: -0.8s; 359 } 360 361 .container3 .circle2 { 362 -webkit-animation-delay: -0.7s; 363 animation-delay: -0.7s; 364 } 365 366 .container1 .circle3 { 367 -webkit-animation-delay: -0.6s; 368 animation-delay: -0.6s; 369 } 370 371 .container2 .circle3 { 372 -webkit-animation-delay: -0.5s; 373 animation-delay: -0.5s; 374 } 375 376 .container3 .circle3 { 377 -webkit-animation-delay: -0.4s; 378 animation-delay: -0.4s; 379 } 380 381 .container1 .circle4 { 382 -webkit-animation-delay: -0.3s; 383 animation-delay: -0.3s; 384 } 385 386 .container2 .circle4 { 387 -webkit-animation-delay: -0.2s; 388 animation-delay: -0.2s; 389 } 390 391 .container3 .circle4 { 392 -webkit-animation-delay: -0.1s; 393 animation-delay: -0.1s; 394 } 395 396 @-webkit-keyframes bouncedelay { 397 0%, 80%, 100% { -webkit-transform: scale(0.0) } 398 40% { -webkit-transform: scale(1.0) } 399 } 400 401 @keyframes bouncedelay { 402 0%, 80%, 100% { 403 transform: scale(0.0); 404 -webkit-transform: scale(0.0); 405 } 40% { 406 transform: scale(1.0); 407 -webkit-transform: scale(1.0); 408 } 409 }
效果:
阿亮的笔记
