css3 loading动画练习
以下为css3制作的loading动画。
HTML为：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>css3加载动画</title> 6 <link rel="stylesheet" type="text/css" href="css/loading.css"> 7 <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> 8 9 </head> 10 11 <body> 12 13 <div class="load1"> 14 <strong>Loading……</strong> 15 <span></span> 16 </div> 17 18 <div class="load2"> 19 <div class="rect1"></div> 20 <div class="rect2"></div> 21 <div class="rect3"></div> 22 <div class="rect4"></div> 23 <div class="rect5"></div> 24 </div> 25 26 <div class="load3"> 27 </div> 28 29 <div class="load4"> 30 <div class="double-bounce1"></div> 31 <div class="double-bounce2"></div> 32 </div> 33 34 <div class="load5"> 35 <div class="cube1"></div> 36 <div class="cube2"></div> 37 </div> 38 39 <div class="load6"> 40 <div class="cir1"></div> 41 <div class="cir2"></div> 42 </div> 43 44 <div class="load7"> 45 <div class="load7-container container1"> 46 <div class="circle1"></div> 47 <div class="circle2"></div> 48 <div class="circle3"></div> 49 <div class="circle4"></div> 50 </div> 51 <div class="load7-container container2"> 52 <div class="circle1"></div> 53 <div class="circle2"></div> 54 <div class="circle3"></div> 55 <div class="circle4"></div> 56 </div> 57 </div> 58 </body> 59 </html>
css为：
1 @charset "utf-8"; 2 /* CSS Document */ 3 4 /*box-shadow: h-shadow v-shadow blur spread color inset;*/ 5 6 .load1{ 7 width:100px; 8 height:100px; 9 -webkit-border-radius: 50px; 10 -moz-border-radius: 50px; 11 border-radius: 50px; 12 position:relative; 13 line-height:100px; 14 background:#000; 15 color:#fff; 16 font-size:12px; 17 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); 18 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); 19 box-shadow: 0 0 5px rgba(0,0,0,0.5); 20 text-align:center; 21 margin:80px auto; 22 } 23 24 /* 利用before添加外围圈 */ 25 .load1:before{ 26 content: ""; 27 position: absolute; 28 /* 上下左右一共出去20px,即为20px的外圈 */ 29 left: -20px; 30 top: -20px; 31 bottom: -20px; 32 right: -20px; 33 /* 上下左右一共出去20px,即为20px的外圈 */ 34 /* border-radius值超过70px也可 使其呈现为圆形即可 */ 35 -webkit-border-radius: 70px; 36 -moz-border-radius: 70px; 37 border-radius: 70px; 38 background:#999; 39 z-index: -2; 40 -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2); 41 -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2); 42 box-shadow: inset 0 0 10px rgba(0,0,0,0.2); 43 } 44 /* 制作一个三角形 */ 45 .load1 span{ 46 position: absolute; 47 width: 0; 48 height: 0; 49 border-left: 50px solid transparent; 50 border-right: 50px solid transparent; 51 border-top: 80px solid rgba(255,255,255,0.5); 52 z-index: -1; 53 top: -20px; 54 left: 0px; 55 -webkit-animation: ticktock 5s linear infinite; 56 -webkit-transform-origin: 50px 80px; 57 -moz-animation: ticktock 5s linear infinite; 58 -moz-transform-origin: 50px 80px; 59 60 61 } 62 .load1 strong{ 63 display:block; 64 margin:0 auto; 65 overflow:hidden; 66 -webkit-animation: expand 2.5s linear infinite; 67 -moz-animation: expand 2.5s linear infinite; 68 } 69 70 71 @-webkit-keyframes expand { 72 0% { 73 width: 0; 74 } 75 100% { 76 width: 60px; 77 } 78 } 79 @-moz-keyframes expand { 80 0% { 81 width: 0; 82 } 83 100% { 84 width: 60px; 85 } 86 } 87 /* 旋转指针 */ 88 @-webkit-keyframes ticktock { 89 0% { 90 -webkit-transform: rotate(0); 91 } 92 100% { 93 -webkit-transform: rotate(360deg); 94 } 95 } 96 @-moz-keyframes ticktock { 97 0% { 98 -moz-transform: rotate(0); 99 } 100 100% { 101 -moz-transform: rotate(360deg); 102 } 103 } 104 105 /******************************************************************************/ 106 107 .load2 { /* 定义容器 */ 108 margin: 100px auto; 109 width: 50px; 110 height: 60px; 111 text-align: center; 112 font-size: 10px; 113 } 114 115 .load2 > div { 116 /* 定义竖条样式 */ 117 background-color: #67CF22; 118 height: 100%; 119 width: 6px; 120 display: inline-block; 121 122 -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 123 animation: stretchdelay 1.2s infinite ease-in-out; 124 } 125 .load2 .rect1 {/* 允许负值，-1.2s 使动画马上开始，但跳过 1.2 秒进入动画。 动画一共规定为1.2s */ 126 -webkit-animation-delay: -1.2s; 127 animation-delay: -1.2s; 128 } 129 130 .load2 .rect2 { 131 -webkit-animation-delay: -1.1s; 132 animation-delay: -1.1s; 133 } 134 135 .load2 .rect3 { 136 -webkit-animation-delay: -1.0s; 137 animation-delay: -1.0s; 138 } 139 140 .load2 .rect4 { 141 -webkit-animation-delay: -0.9s; 142 animation-delay: -0.9s; 143 } 144 145 .load2 .rect5 { 146 -webkit-animation-delay: -0.8s; 147 animation-delay: -0.8s; 148 } 149 150 @-webkit-keyframes stretchdelay { 151 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } /* 高度缩小为原来的0.4倍 */ 152 20% { -webkit-transform: scaleY(1.0) } /* 20%时高度为100% */ 153 } 154 155 @keyframes stretchdelay { 156 0%, 40%, 100% { 157 transform: scaleY(0.4); 158 -webkit-transform: scaleY(0.4); 159 } 20% { 160 transform: scaleY(1.0); 161 -webkit-transform: scaleY(1.0); 162 } 163 } 164 165 /*********************************************************/ 166 167 .load3 { /* 定义外观样式 */ 168 width: 60px; 169 height: 60px; 170 background-color: #67CF22; 171 172 margin: 100px auto; 173 -webkit-animation: rotateplane 1.2s infinite ease-in-out; 174 animation: rotateplane 1.2s infinite ease-in-out; 175 } 176 177 @-webkit-keyframes rotateplane { 178 0% { -webkit-transform: perspective(120px) } 179 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 180 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 181 } 182 /* transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。 183 正如您所看到的，当元素设置了flat值时，其子元素不会根据translateZ()值摊开，而在同一平面旋转，如上图上部分所示；当元素设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会堆叠在一起，如上图下部分所示。 184 185 有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果） 186 187 其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。 188 189 190 */ 191 @keyframes rotateplane { 192 0% { 193 transform: perspective(120px) rotateX(0deg) rotateY(0deg); 194 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 195 } 50% { 196 transform: perspective(120px) rotateX(-180deg) rotateY(0deg); 197 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg) 198 } 100% { 199 transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); 200 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); 201 } 202 } 203 204 /***********************************************/ 205 .load4 { 206 width: 60px; 207 height: 60px; 208 209 position: relative; 210 margin: 100px auto; 211 } 212 213 .double-bounce1, .double-bounce2 { 214 width: 100%; 215 height: 100%; 216 border-radius: 50%; 217 background-color: #67CF22; 218 opacity: 0.6; 219 position: absolute; 220 top: 0; 221 left: 0; 222 223 -webkit-animation: bounce 2.0s infinite ease-in-out; 224 animation: bounce 2.0s infinite ease-in-out; 225 } 226 227 .double-bounce2 { 228 -webkit-animation-delay: -1.0s; /* 立即执行且跳过1秒执行，此处形成两个圆重叠效果 */ 229 animation-delay: -1.0s; 230 } 231 232 @-webkit-keyframes bounce { /* 圆由无到有，scale(1.0)为原图像大小 */ 233 0%, 100% { -webkit-transform: scale(0.0) } 234 50% { -webkit-transform: scale(1.0) } 235 } 236 237 @keyframes bounce { 238 0%, 100% { 239 transform: scale(0.0); 240 -webkit-transform: scale(0.0); 241 } 50% { 242 transform: scale(1.0); 243 -webkit-transform: scale(1.0); 244 } 245 } 246 247 /********************************************************/ 248 .load5{ /* 规定容器 */ 249 margin:100px auto; 250 width:32px; 251 height:32px; 252 position:relative; 253 254 } 255 .cube1, .cube2 { /* 规定样式 */ 256 background-color: #67CF22; 257 width: 30px; 258 height: 30px; 259 position: absolute; 260 top: 0; 261 left: 0; 262 263 -webkit-animation: cubemove 1.8s infinite ease-in-out; 264 animation: cubemove 1.8s infinite ease-in-out; 265 } 266 267 .cube2 { 268 -webkit-animation-delay: -0.9s; 269 animation-delay: -0.9s; 270 } 271 @-webkit-keyframes cubemove { 272 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 273 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 274 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 275 100% { -webkit-transform: rotate(-360deg) } 276 } 277 278 @keyframes cubemove { /* 在50%的时候顿了一下至50.1%，防止一直旋转造成旋转太快 */ 279 25% { 280 transform: translateX(42px) rotate(-90deg) scale(0.5); 281 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 282 } 50% { 283 transform: translateX(42px) translateY(42px) rotate(-179deg); 284 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 285 } 50.1% { 286 transform: translateX(42px) translateY(42px) rotate(-180deg); 287 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 288 } 75% { 289 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 290 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 291 } 100% { 292 transform: rotate(-360deg); 293 -webkit-transform: rotate(-360deg); 294 } 295 } 296 297 /***************************************************************/ 298 .load6{ /* 对容器也进行动画，形成小圆转圈效果 */ 299 margin:100px auto; 300 width:90px; 301 height:90px; 302 position:relative; 303 text-align:center; 304 border:1px solid #000; 305 -webkit-animation:rotate 2.0s infinite linear; 306 animation:rotate 2.0s infinite linear; 307 } 308 309 .cir1, .cir2{ 310 width:60%; 311 height:60%; 312 display:inline-block; 313 position:absolute; 314 top:0; 315 left:0; 316 background:#67cf22; 317 border-radius:100%; 318 -webkit-animation:bounce 2.0s infinite linear; 319 animation:bounce 2.0s infinite linear; 320 } 321 322 .cir2{ 323 -webkit-animation-delay:-1.0s; 324 animation-delay:-1.0s; 325 position:absolute; 326 bottom:0; 327 top:auto; /* 通过浏览器计算上边位置 */ 328 } 329 330 331 @-webkit-keyframes rotate{ 332 100% 333 { 334 -webkit-transform:rotate(360deg) 335 } 336 337 } 338 339 @keyframes rotate{ 340 100%{ 341 transform:rotate(360deg); 342 -webkit-transform:rotate(360deg); 343 344 } 345 } 346 347 @keyframes bounce{ 348 0%,100%{ 349 transform:scale(0.0); 350 -webkit-transform:scale(0.0); 351 352 } 353 50%{ 354 transform:scale(1.0); 355 -webkit-transform:scale(1.0); 356 357 } 358 359 }
灵感来源：http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html
