{"id":2526,"date":"2017-06-06T20:26:08","date_gmt":"2017-06-06T12:26:08","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2526"},"modified":"2017-06-06T20:26:08","modified_gmt":"2017-06-06T12:26:08","slug":"css-loading%e5%8a%a8%e7%94%bb","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2526","title":{"rendered":"css loading\u52a8\u753b"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>\u52a0\u8f7d\u4e2d<\/title>\r\n\t<meta charset=\"UTF-8\">\r\n<\/head>\r\n<body>\r\n<style>\r\n\t.loading1, .loading2, .loading3, .loading4, .loading5, .loading6, .loading7 {\r\n\t\tfloat: left;\r\n\t\tmargin: 10px;\r\n\t}\r\n<\/style>\r\n<style>\r\n\t.loading1 {\r\n\t\tposition: relative;\r\n\t}\r\n\t\r\n\t.loading1 .left, .loading1 .right {\r\n\t\tposition: relative;\r\n\t\tfloat: left;\r\n\t\twidth: 20px;\r\n\t\theight: 40px;\r\n\t\toverflow: hidden;\r\n\t\tbackground-color: #E5E4E5;\r\n\t}\r\n\t\r\n\t.loading1 .left div, .loading1 .right div {\r\n\t\tcontent: \"\";\r\n\t\tposition: absolute;\r\n\t\tdisplay: block;\r\n\t\twidth: 20px;\r\n\t\theight: 40px;\r\n\t\tbackground-color: #333;\r\n\t}\r\n\t\r\n\t.loading1 .left {\r\n\t\tborder-radius: 40px 0 0 40px;\r\n\t}\r\n\t\r\n\t.loading1 .left div {\r\n\t\tborder-radius: 40px 0 0 40px;\r\n\t\ttransform-origin: right center;\r\n\t\tanimation: circleLeft 3s linear infinite;\r\n\t}\r\n\t\r\n\t.loading1 .right {\r\n\t\tborder-radius: 0 40px 40px 0;\r\n\t}\r\n\t\r\n\t.loading1 .right div {\r\n\t\tborder-radius: 0 40px 40px 0;\r\n\t\ttransform-origin: left center;\r\n\t\tanimation: circleRight 3s linear infinite;\r\n\t}\r\n\t\r\n\t.loading1 .center {\r\n\t\tposition: absolute;\r\n\t\tleft: 3px;\r\n\t\ttop: 3px;\r\n\t\twidth: 34px;\r\n\t\theight: 34px;\r\n\t\tbackground-color: #fff;\r\n\t\tborder-radius: 50%;\r\n\t}\r\n\t\r\n\t@keyframes circleLeft {\r\n\t\t0% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t75% {\r\n\t\t\ttransform: rotateZ(-90deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t}\r\n\t\r\n\t@keyframes circleRight {\r\n\t\t0% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t25% {\r\n\t\t\ttransform: rotateZ(-90deg);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading1\">\r\n\t<div class=\"left\">\r\n\t\t<div><\/div>\r\n\t<\/div>\r\n\t<div class=\"right\">\r\n\t\t<div><\/div>\r\n\t<\/div>\r\n\t<div class=\"center\">\r\n\t\t<i><\/i>\r\n\t<\/div>\r\n<\/div>\r\n<style>\r\n\t.loading2 .left div {\r\n\t\tanimation: circleLeft2 6s linear infinite;\r\n\t}\r\n\t\r\n\t.loading2 .right div {\r\n\t\tanimation: circleRight2 6s linear infinite;\r\n\t}\r\n\t\r\n\t@keyframes circleLeft2 {\r\n\t\t0% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t25% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t37.5% {\r\n\t\t\ttransform: rotateZ(-90deg);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t\t75% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t\t87.5% {\r\n\t\t\ttransform: rotateZ(90deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotateZ(180deg);\r\n\t\t}\r\n\t}\r\n\t\r\n\t@keyframes circleRight2 {\r\n\t\t0% {\r\n\t\t\ttransform: rotateZ(-180deg);\r\n\t\t}\r\n\t\t12.5% {\r\n\t\t\ttransform: rotateZ(-90deg);\r\n\t\t}\r\n\t\t25% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: rotateZ(0deg);\r\n\t\t}\r\n\t\t62.5% {\r\n\t\t\ttransform: rotateZ(90deg);\r\n\t\t}\r\n\t\t75% {\r\n\t\t\ttransform: rotateZ(180deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotateZ(180deg);\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading1 loading2\">\r\n\t<div class=\"left\">\r\n\t\t<div><\/div>\r\n\t<\/div>\r\n\t<div class=\"right\">\r\n\t\t<div><\/div>\r\n\t<\/div>\r\n\t<div class=\"center\">\r\n\t\t<i><\/i>\r\n\t<\/div>\r\n<\/div>\r\n<style>\r\n\t.loading3 p {\r\n\t\theight: 25px;\r\n\t\twidth: 25px;\r\n\t\tmargin: auto;\r\n\t\tborder: 2px solid #ccc;\r\n\t\tborder-bottom-color: #333;\r\n\t\tborder-radius: 100%;\r\n\t\tanimation: rotate3 1s linear infinite;\r\n\t}\r\n\t\r\n\t@keyframes rotate3 {\r\n\t\t0% {\r\n\t\t\ttransform: rotate(0deg);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: rotate(180deg);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: rotate(360deg);\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading3\">\r\n\t<p><\/p>\r\n<\/div>\r\n<style>\r\n\t.loading4 p {\r\n\t\tdisplay: inline-block;\r\n\t\twidth: 12px;\r\n\t\theight: 12px;\r\n\t\tborder-radius: 100%;\r\n\t\tbackground-color: #333;\r\n\t}\r\n\t\r\n\t.loading4 p:first-child {\r\n\t\tanimation: scale4 1s 0.15s infinite;\r\n\t}\r\n\t\r\n\t.loading4 p:nth-child(2) {\r\n\t\tanimation: scale4 1s 0.3s infinite;\r\n\t}\r\n\t\r\n\t.loading4 p:nth-child(3) {\r\n\t\tanimation: scale4 1s 0.45s infinite;\r\n\t}\r\n\t\r\n\t@keyframes scale4 {\r\n\t\t0% {\r\n\t\t\ttransform: scale(0);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: scale(1);\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading4\">\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n<\/div>\r\n<style>\r\n\t.loading5 p {\r\n\t\tdisplay: inline-block;\r\n\t\twidth: 4px;\r\n\t\theight: 35px;\r\n\t\tborder-radius: 2px;\r\n\t\tbackground-color: #333;\r\n\t}\r\n\t\r\n\t.loading5 p:first-child {\r\n\t\tanimation: scale5 1s 0.1s infinite;\r\n\t}\r\n\t\r\n\t.loading5 p:nth-child(2) {\r\n\t\tanimation: scale5 1s 0.2s infinite;\r\n\t}\r\n\t\r\n\t.loading5 p:nth-child(3) {\r\n\t\tanimation: scale5 1s 0.3s infinite;\r\n\t}\r\n\t\r\n\t.loading5 p:nth-child(4) {\r\n\t\tanimation: scale5 1s 0.4s infinite;\r\n\t}\r\n\t\r\n\t.loading5 p:nth-child(5) {\r\n\t\tanimation: scale5 1s 0.5s infinite;\r\n\t}\r\n\t\r\n\t@keyframes scale5 {\r\n\t\t0% {\r\n\t\t\ttransform: scaleY(1);\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: scaleY(.4);\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: scaleY(1);\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading5\">\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n\t<p><\/p>\r\n<\/div>\r\n<style>\r\n\t.loading6 {\r\n\t\tposition: relative;\r\n\t\twidth: 80px;\r\n\t\theight: 80px;\r\n\t}\r\n\t\r\n\t.loading6 i {\r\n\t\tposition: absolute;\r\n\t\twidth: 15px;\r\n\t\theight: 15px;\r\n\t\tbackground-color: #000;\r\n\t\tborder-radius: 100%;\r\n\t}\r\n\t\r\n\t@keyframes loading6 {\r\n\t\t0% {\r\n\t\t\ttransform: scale(0.4);\r\n\t\t\topacity: 0.5;\r\n\t\t}\r\n\t\t50% {\r\n\t\t\ttransform: scale(1);\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\ttransform: scale(0.4);\r\n\t\t\topacity: 0.5;\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading6\">\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n<\/div>\r\n<style>\r\n\t.loading7 {\r\n\t\tposition: relative;\r\n\t\twidth: 80px;\r\n\t\theight: 80px;\r\n\t}\r\n\t\r\n\t.loading7 i {\r\n\t\tposition: absolute;\r\n\t\twidth: 3px;\r\n\t\theight: 10px;\r\n\t\tbackground-color: #000;\r\n\t}\r\n\t\r\n\t@keyframes loading7 {\r\n\t\t0% {\r\n\t\t\topacity: 0.3;\r\n\t\t}\r\n\t\t100% {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t}\r\n<\/style>\r\n<div class=\"loading7\">\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n\t<i><\/i>\r\n<\/div>\r\n<script>\r\n  window.onload = function () {\r\n    var eleI6 = document.querySelectorAll('.loading6 i'),\r\n        angle6 = 360 \/ eleI6.length;\r\n    for (var i = eleI6.length - 1; i >= 0; i--) {\r\n      eleI6[i].style.cssText += 'top:' + (34 - Math.sin(angle6 * i * Math.PI \/ 180) * 25) + 'px;left:' + (34 - Math.cos(angle6 * i * Math.PI \/ 180) * 25) + 'px;animation: loading6 1.8s ' + .22 * (i + 1) + 's infinite linear;';\r\n    }\r\n    var eleI7 = document.querySelectorAll('.loading7 i'),\r\n        angle7 = 360 \/ eleI7.length;\r\n    for (var i = eleI7.length - 1; i >= 0; i--) {\r\n      eleI7[i].style.cssText += 'top:' + (34 - Math.sin(angle7 * i * Math.PI \/ 180) * 15) + 'px;left:' + (34 - Math.cos(angle7 * i * Math.PI \/ 180) * 15)\r\n          + 'px;transform:rotate(' + (angle7 * i + 90) + 'deg);animation: loading7 1s ' + .1 * (i + 1) + 's infinite linear;';\r\n    }\r\n  };\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » css loading\u52a8\u753b<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <title>\u52a0\u8f7d\u4e2d<\/title> <meta charset=”UTF […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,34,137],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2526"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2526"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2526\/revisions"}],"predecessor-version":[{"id":2527,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2526\/revisions\/2527"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2526"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}