Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍如何使用纯CSS实现的win8开机加载的动画特效，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完!

实现的代码。

html代码：

Windows 8

css3代码：

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;

}

h2{

float: right;

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 .bottom-right{

position: absolute;

bottom: 0;

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

}

}

以上是"如何使用纯CSS实现的win8开机加载的动画特效"这篇文章的所有内容，感谢各位的阅读!希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.