一款利用纯css3实现的win8加载动画的实例分析

　　今天给大家分享一款纯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>

　　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);

}

相关文章

最新文章

热门文章

猜你喜欢