{"id":727,"date":"2013-04-20T13:32:25","date_gmt":"2013-04-20T05:32:25","guid":{"rendered":"http:\/\/www.xiaojia.info\/?p=727"},"modified":"2013-04-20T13:33:50","modified_gmt":"2013-04-20T05:33:50","slug":"css3_windows8_loading","status":"publish","type":"post","link":"https:\/\/www.luja.cc\/?p=727","title":{"rendered":"\u7eafcss3\u5b9e\u73b0windows8\u52a0\u8f7d\u52a8\u753b"},"content":{"rendered":"<p>\u8be5\u52a8\u753b\u53ea\u517c\u5bb9\u90e8\u5206\u6d4f\u89c8\u5668\u3002<br \/>\n<!--more--><br \/>\n\u793a\u4f8b\uff1a<\/p>\n<div class=\"loader\">\n<div class=\"loading\">\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<\/p><\/div>\n<\/div>\n<style>\n.loader{\n  text-align: center;\n}\n.loading {\n  position: relative;\n  display: inline-block;\n}\n.loading .dot {\n  position: absolute;\n  opacity: 0;\n  width: 64px;\n  height: 64px;\n  -webkit-transform: rotate(225deg);\n  -moz-transform: rotate(225deg);\n  -o-transform: rotate(225deg);\n  -ms-transform: rotate(225deg);\n  transform: rotate(225deg);\n  -webkit-animation-name: loading;\n  -moz-animation-name: loading;\n  -ms-animation-name: loading;\n  -o-animation-name: loading;\n  animation-name: loading;\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n  -o-animation-duration: 5.28s;\n  -moz-animation-duration: 5.28s;\n  -webkit-animation-duration: 5.28s;\n  animation-duration: 5.28s;\n}\n.loading .dot:after {\n  content: \"\";\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #000000;\n}\n.loading .dot:nth-child(2) {\n  -webkit-animation-delay: .23s;\n  -moz-animation-delay: .23s;\n  -ms-animation-delay: .23s;\n  -o-animation-delay: .23s;\n  animation-delay: .23s;\n}\n.loading .dot:nth-child(3) {\n  -webkit-animation-delay: .46s;\n  -moz-animation-delay: .46s;\n  -ms-animation-delay: .46s;\n  -o-animation-delay: .46s;\n  animation-delay: .46s;\n}\n.loading .dot:nth-child(4) {\n  -webkit-animation-delay: .69s;\n  -moz-animation-delay: .69s;\n  -ms-animation-delay: .69s;\n  -o-animation-delay: .69s;\n  animation-delay: .69s;\n}\n.loading .dot:nth-child(5) {\n  -webkit-animation-delay: .92s;\n  -moz-animation-delay: .92s;\n  -ms-animation-delay: .92s;\n  -o-animation-delay: .92s;\n  animation-delay: .92s;\n}\n@-webkit-keyframes loading {\n  0% {\n    -webkit-transform: rotate(225deg);\n    opacity: 1;\n    -webkit-animation-timing-function: ease-out;\n  }\n  8% {\n    -webkit-transform: rotate(345deg);\n    -webkit-animation-timing-function: linear;\n  }\n  30% {\n    -webkit-transform: rotate(455deg);\n    -webkit-animation-timing-function: ease-in-out;\n  }\n  40% {\n    -webkit-transform: rotate(690deg);\n    -webkit-animation-timing-function: linear;\n  }\n  60% {\n    -webkit-transform: rotate(815deg);\n    opacity: 1;\n    -webkit-animation-timing-function: ease-out;\n  }\n  75% {\n    -webkit-transform: rotate(965deg);\n    -webkit-animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}<\/p>\n<p>@-moz-keyframes loading {\n  0% {\n    -moz-transform: rotate(225deg);\n    opacity: 1;\n    -moz-animation-timing-function: ease-out;\n  }\n  8% {\n    -moz-transform: rotate(345deg);\n    -moz-animation-timing-function: linear;\n  }\n  30% {\n    -moz-transform: rotate(455deg);\n    -moz-animation-timing-function: ease-in-out;\n  }\n  40% {\n    -moz-transform: rotate(690deg);\n    -moz-animation-timing-function: linear;\n  }\n  60% {\n    -moz-transform: rotate(815deg);\n    opacity: 1;\n    -moz-animation-timing-function: ease-out;\n  }\n  75% {\n    -moz-transform: rotate(965deg);\n    -moz-animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}<\/p>\n<p>@keyframes loading {\n  0% {\n    transform: rotate(225deg);\n    opacity: 1;\n    animation-timing-function: ease-out;\n  }\n  8% {\n    transform: rotate(345deg);\n    animation-timing-function: linear;\n  }\n  30% {\n    transform: rotate(455deg);\n    animation-timing-function: ease-in-out;\n  }\n  40% {\n    transform: rotate(690deg);\n    animation-timing-function: linear;\n  }\n  60% {\n    transform: rotate(815deg);\n    opacity: 1;\n    animation-timing-function: ease-out;\n  }\n  75% {\n    transform: rotate(965deg);\n    animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n<\/style>\n<p>\u4ee3\u7801\uff1a<br \/>\n[html]<br \/>\n<!doctype html><br \/>\n<html><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<title>CSS3 Windows 8 Loading<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<p>\u517c\u5bb9 Chrome\uff0cFirefox\uff0cOpera\uff0cIE10+<\/p>\n<div class=\"loader\">\n<div class=\"loading\">\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<div class=\"dot\"><\/div>\n<\/p><\/div>\n<\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<style>\n*{margin: 0; padding: 0;}\nh1{ font-weight: normal; text-align:center; margin: 30px 0; }\np{text-align: center;}\nbody {\n  background: #000;\n  color: #FFF;\n  font-family: \"microsoft yahei\", \\5FAE\\8F6F\\96C5\\9ED1, \"helvetica neue\", stheiti, tahoma, sans-serif;\n}\n.loader{\n  text-align: center;\n  margin-top: 50px;\n}\n.loading {\n  position: relative;\n  display: inline-block;\n}\n.loading .dot {\n  position: absolute;\n  opacity: 0;\n  width: 64px;\n  height: 64px;\n  -webkit-transform: rotate(225deg);\n  -moz-transform: rotate(225deg);\n  -o-transform: rotate(225deg);\n  -ms-transform: rotate(225deg);\n  transform: rotate(225deg);\n  -webkit-animation-name: loading;\n  -moz-animation-name: loading;\n  -ms-animation-name: loading;\n  -o-animation-name: loading;\n  animation-name: loading;\n  -webkit-animation-iteration-count: infinite;\n  -moz-animation-iteration-count: infinite;\n  -ms-animation-iteration-count: infinite;\n  -o-animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n  -o-animation-duration: 5.28s;\n  -moz-animation-duration: 5.28s;\n  -webkit-animation-duration: 5.28s;\n  animation-duration: 5.28s;\n}\n.loading .dot:after {\n  content: \"\";\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #FFF;\n}\n.loading .dot:nth-child(2) {\n  -webkit-animation-delay: .23s;\n  -moz-animation-delay: .23s;\n  -ms-animation-delay: .23s;\n  -o-animation-delay: .23s;\n  animation-delay: .23s;\n}\n.loading .dot:nth-child(3) {\n  -webkit-animation-delay: .46s;\n  -moz-animation-delay: .46s;\n  -ms-animation-delay: .46s;\n  -o-animation-delay: .46s;\n  animation-delay: .46s;\n}\n.loading .dot:nth-child(4) {\n  -webkit-animation-delay: .69s;\n  -moz-animation-delay: .69s;\n  -ms-animation-delay: .69s;\n  -o-animation-delay: .69s;\n  animation-delay: .69s;\n}\n.loading .dot:nth-child(5) {\n  -webkit-animation-delay: .92s;\n  -moz-animation-delay: .92s;\n  -ms-animation-delay: .92s;\n  -o-animation-delay: .92s;\n  animation-delay: .92s;\n}\n@-webkit-keyframes loading {\n  0% {\n    -webkit-transform: rotate(225deg);\n    opacity: 1;\n    -webkit-animation-timing-function: ease-out;\n  }\n  8% {\n    -webkit-transform: rotate(345deg);\n    -webkit-animation-timing-function: linear;\n  }\n  30% {\n    -webkit-transform: rotate(455deg);\n    -webkit-animation-timing-function: ease-in-out;\n  }\n  40% {\n    -webkit-transform: rotate(690deg);\n    -webkit-animation-timing-function: linear;\n  }\n  60% {\n    -webkit-transform: rotate(815deg);\n    opacity: 1;\n    -webkit-animation-timing-function: ease-out;\n  }\n  75% {\n    -webkit-transform: rotate(965deg);\n    -webkit-animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}<\/p>\n<p>@-moz-keyframes loading {\n  0% {\n    -moz-transform: rotate(225deg);\n    opacity: 1;\n    -moz-animation-timing-function: ease-out;\n  }\n  8% {\n    -moz-transform: rotate(345deg);\n    -moz-animation-timing-function: linear;\n  }\n  30% {\n    -moz-transform: rotate(455deg);\n    -moz-animation-timing-function: ease-in-out;\n  }\n  40% {\n    -moz-transform: rotate(690deg);\n    -moz-animation-timing-function: linear;\n  }\n  60% {\n    -moz-transform: rotate(815deg);\n    opacity: 1;\n    -moz-animation-timing-function: ease-out;\n  }\n  75% {\n    -moz-transform: rotate(965deg);\n    -moz-animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}<\/p>\n<p>@keyframes loading {\n  0% {\n    transform: rotate(225deg);\n    opacity: 1;\n    animation-timing-function: ease-out;\n  }\n  8% {\n    transform: rotate(345deg);\n    animation-timing-function: linear;\n  }\n  30% {\n    transform: rotate(455deg);\n    animation-timing-function: ease-in-out;\n  }\n  40% {\n    transform: rotate(690deg);\n    animation-timing-function: linear;\n  }\n  60% {\n    transform: rotate(815deg);\n    opacity: 1;\n    animation-timing-function: ease-out;\n  }\n  75% {\n    transform: rotate(965deg);\n    animation-timing-function: ease-out;\n  }\n  76% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n<\/style>\n<p>[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8be5\u52a8\u753b\u53ea\u517c\u5bb9\u90e8\u5206\u6d4f\u89c8\u5668\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,56],"tags":[20,141,140],"_links":{"self":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/727"}],"collection":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=727"}],"version-history":[{"count":3,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/727\/revisions"}],"predecessor-version":[{"id":730,"href":"https:\/\/www.luja.cc\/index.php?rest_route=\/wp\/v2\/posts\/727\/revisions\/730"}],"wp:attachment":[{"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luja.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}