CSS3 Windows 8 Loading – 有爱前端

<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS3 Windows 8 Loading 动画 by 一丝</title> <style type="text/css"> *{margin: 0; padding: 0;} p{text-align: center;} body { background: #000; color: #FFF; font-family: "helvetica neue", stheiti, "microsoft yahei", \5FAE\8F6F\96C5\9ED1, tahoma, sans-serif; } .loader{ text-align: center; margin-top: 50px; } .loading { position: relative; display: inline-block; } .loading .dot { position: absolute; opacity: 0; width: 64px; height: 64px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); -webkit-animation-name: loading; -moz-animation-name: loading; -ms-animation-name: loading; -o-animation-name: loading; animation-name: loading; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -o-animation-duration: 5.28s; -moz-animation-duration: 5.28s; -webkit-animation-duration: 5.28s; animation-duration: 5.28s; } .loading .dot:after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFF; } .loading .dot:nth-child(2) { -webkit-animation-delay: .23s; -moz-animation-delay: .23s; -ms-animation-delay: .23s; -o-animation-delay: .23s; animation-delay: .23s; } .loading .dot:nth-child(3) { -webkit-animation-delay: .46s; -moz-animation-delay: .46s; -ms-animation-delay: .46s; -o-animation-delay: .46s; animation-delay: .46s; } .loading .dot:nth-child(4) { -webkit-animation-delay: .69s; -moz-animation-delay: .69s; -ms-animation-delay: .69s; -o-animation-delay: .69s; animation-delay: .69s; } .loading .dot:nth-child(5) { -webkit-animation-delay: .92s; -moz-animation-delay: .92s; -ms-animation-delay: .92s; -o-animation-delay: .92s; animation-delay: .92s; } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(225deg); opacity: 1; -webkit-animation-timing-function: ease-out; } 8% { -webkit-transform: rotate(345deg); -webkit-animation-timing-function: linear; } 30% { -webkit-transform: rotate(455deg); -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(690deg); -webkit-animation-timing-function: linear; } 60% { -webkit-transform: rotate(815deg); opacity: 1; -webkit-animation-timing-function: ease-out; } 75% { -webkit-transform: rotate(965deg); -webkit-animation-timing-function: ease-out; } 76% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes loading { 0% { -moz-transform: rotate(225deg); opacity: 1; -moz-animation-timing-function: ease-out; } 8% { -moz-transform: rotate(345deg); -moz-animation-timing-function: linear; } 30% { -moz-transform: rotate(455deg); -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(690deg); -moz-animation-timing-function: linear; } 60% { -moz-transform: rotate(815deg); opacity: 1; -moz-animation-timing-function: ease-out; } 75% { -moz-transform: rotate(965deg); -moz-animation-timing-function: ease-out; } 76% { opacity: 0; } 100% { opacity: 0; } } @keyframes loading { 0% { transform: rotate(225deg); opacity: 1; animation-timing-function: ease-out; } 8% { transform: rotate(345deg); animation-timing-function: linear; } 30% { transform: rotate(455deg); animation-timing-function: ease-in-out; } 40% { transform: rotate(690deg); animation-timing-function: linear; } 60% { transform: rotate(815deg); opacity: 1; animation-timing-function: ease-out; } 75% { transform: rotate(965deg); animation-timing-function: ease-out; } 76% { opacity: 0; } 100% { opacity: 0; } } </style> </head> <body> <p>兼容 Chrome，Firefox，Opera，IE10+</p> <div class="loader"> <div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » CSS3 Windows 8 Loading