今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="wrapp"> <divclass="text"> <h1> Windows8</h1> </div> <divclass="logo"> <spanclass="top-left"></span><spanclass="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:-150px00-300px; -webkit-perspective:30px; -webkit-transform:translateX(0px); -webkit-animation:wrapp400ms800msease-inforwards; -moz-perspective:30px; -moz-transform:translateX(0px); -moz-animation:wrapp400ms800msease-inforwards; -ms-perspective:30px; -ms-transform:translateX(0px); -ms-animation:wrapp400ms800msease-inforwards; perspective:30px; transform:translateX(0px); animation:wrapp400ms800msease-inforwards; } .text{ position:absolute; top:50%; left:50%; width:0px; height:60px; margin:-30px00-160px; overflow:hidden; -webkit-transform:translateX(0px); -webkit-animation:text400ms800mslinearforwards; -moz-transform:translateX(0px); -moz-animation:text400ms800mslinearforwards; -ms-transform:translateX(0px); -ms-animation:text400ms800mslinearforwards; transform:translateX(0px); animation:text400ms800mslinearforwards; } h1{ float:rightright; font-family:"SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",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:-45px00-45px; background-color:#fff; -webkit-transform:translateX(0px)rotateY(10deg); -webkit-animation:logo500ms300msease-outforwards; -moz-transform:translateX(0px)rotateY(10deg); -moz-animation:logo500ms300msease-outforwards; -ms-transform:translateX(0px)rotateY(10deg); -ms-animation:logo500ms300msease-outforwards; transform:translateX(0px)rotateY(10deg); animation:logo500ms300msease-outforwards; } .logo.top-left{ position:absolute; top:0; left:0; width:44px; height:44px; border-right:solid2px#90da15; border-bottom:solid2px#90da15; } .logo.bottombottom-rightright{ position:absolute; bottombottom:0; rightright:0; width:44px; height:44px; border-left:solid2px#90da15; border-top:solid2px#90da15; } @-webkit-keyframeslogo{ from{ -webkit-transform:translateX(0px)rotateY(10deg); } to{ -webkit-transform:translateX(0px)rotateY(-10deg); } } @-webkit-keyframestext{ from{ width:0px; -webkit-transform:translateX(0px); } 60%{ width:0px; } to{ width:320px; -webkit-transform:translateX(240px); } } @-webkit-keyframeswrapp{ from{ -webkit-transform:translateX(0px); } to{ -webkit-transform:translateX(-200px); } } @-moz-keyframeslogo{ from{ -moz-transform:translateX(0px)rotateY(10deg); } to{ -moz-transform:translateX(0px)rotateY(-10deg); } } @-moz-keyframestext{ from{ width:0px; -moz-transform:translateX(0px); } 60%{ width:0px; } to{ width:320px; -moz-transform:translateX(240px); } } @-moz-keyframeswrapp{ from{ -moz-transform:translateX(0px); } to{ -moz-transform:translateX(-200px); } } @-ms-keyframeslogo{ from{ -ms-transform:translateX(0px)rotateY(10deg); } to{ -ms-transform:translateX(0px)rotateY(-10deg); } } @-ms-keyframestext{ from{ width:0px; -ms-transform:translateX(0px); } 60%{ width:0px; } to{ width:320px; -ms-transform:translateX(240px); } } @-ms-keyframeswrapp{ from{ -ms-transform:translateX(0px); } to{ -ms-transform:translateX(-200px); } } @keyframeslogo{ from{ transform:translateX(0px)rotateY(10deg); } to{ transform:translateX(0px)rotateY(-10deg); } } @keyframestext{ from{ width:0px; transform:translateX(0px); } 60%{ width:0px; } to{ width:320px; transform:translateX(240px); } } @keyframeswrapp{ from{ transform:translateX(0px); } to{ transform:translateX(-200px); } }
【一款利用纯css3实现的win8加载动画的实例分析】相关文章：
★ Div与table的区别在速度和加载与网页应用等等中的差别介绍