今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <div class="wrapp"> <div class="text"> <h1> Windows 8</h1> </div> <div class="logo"> <span class="top-left"></span><span class="bottom-right"></span> </div> </div>
css3代码：
CSS Code复制内容到剪贴板 body{ margin: 0; padding: 0; background-color: #90da15; } .wrapp{ position: absolute; top: 50%; left: 50%; width: 600px; height: 300px; margin: -150px 0 0 -300px; -webkit-perspective: 30px; -webkit-transform: translateX(0px); -webkit-animation: wrapp 400ms 800ms ease-in forwards; -moz-perspective: 30px; -moz-transform: translateX(0px); -moz-animation: wrapp 400ms 800ms ease-in forwards; -ms-perspective: 30px; -ms-transform: translateX(0px); -ms-animation: wrapp 400ms 800ms ease-in forwards; perspective: 30px; transform: translateX(0px); animation: wrapp 400ms 800ms ease-in forwards; } .text{ position: absolute; top: 50%; left: 50%; width: 0px; height: 60px; margin: -30px 0 0 -160px; overflow: hidden; -webkit-transform: translateX(0px); -webkit-animation: text 400ms 800ms linear forwards; -moz-transform: translateX(0px); -moz-animation: text 400ms 800ms linear forwards; -ms-transform: translateX(0px); -ms-animation: text 400ms 800ms linear forwards; transform: translateX(0px); animation: text 400ms 800ms linear forwards; } h1{ float: rightright; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-weight: normal; color: #fff; padding: 0; margin: 0; width: 320px; height: 60px; font-size: 60px; line-height: 60px; } .logo{ position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; background-color: #fff; -webkit-transform: translateX(0px) rotateY(10deg); -webkit-animation: logo 500ms 300ms ease-out forwards; -moz-transform: translateX(0px) rotateY(10deg); -moz-animation: logo 500ms 300ms ease-out forwards; -ms-transform: translateX(0px) rotateY(10deg); -ms-animation: logo 500ms 300ms ease-out forwards; transform: translateX(0px) rotateY(10deg); animation: logo 500ms 300ms ease-out forwards; } .logo .top-left{ position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-right: solid 2px #90da15; border-bottom: solid 2px #90da15; } .logo .bottombottom-rightright{ position: absolute; bottombottom: 0; rightright: 0; width: 44px; height: 44px; border-left: solid 2px #90da15; border-top: solid 2px #90da15; } @-webkit-keyframes logo { from { -webkit-transform: translateX(0px) rotateY(10deg); } to { -webkit-transform: translateX(0px) rotateY(-10deg); } } @-webkit-keyframes text { from { width: 0px; -webkit-transform: translateX(0px); } 60%{ width: 0px; } to { width: 320px; -webkit-transform: translateX(240px); } } @-webkit-keyframes wrapp { from { -webkit-transform: translateX(0px); } to { -webkit-transform: translateX(-200px); } } @-moz-keyframes logo { from { -moz-transform: translateX(0px) rotateY(10deg); } to { -moz-transform: translateX(0px) rotateY(-10deg); } } @-moz-keyframes text { from { width: 0px; -moz-transform: translateX(0px); } 60%{ width: 0px; } to { width: 320px; -moz-transform: translateX(240px); } } @-moz-keyframes wrapp { from { -moz-transform: translateX(0px); } to { -moz-transform: translateX(-200px); } } @-ms-keyframes logo { from { -ms-transform: translateX(0px) rotateY(10deg); } to { -ms-transform: translateX(0px) rotateY(-10deg); } } @-ms-keyframes text { from { width: 0px; -ms-transform: translateX(0px); } 60%{ width: 0px; } to { width: 320px; -ms-transform: translateX(240px); } } @-ms-keyframes wrapp { from { -ms-transform: translateX(0px); } to { -ms-transform: translateX(-200px); } } @keyframes logo { from { transform: translateX(0px) rotateY(10deg); } to { transform: translateX(0px) rotateY(-10deg); } } @keyframes text { from { width: 0px; transform: translateX(0px); } 60%{ width: 0px; } to { width: 320px; transform: translateX(240px); } } @keyframes wrapp { from { transform: translateX(0px); } to { transform: translateX(-200px); } }
