使用純CSS實現(xiàn)的win8開機加載的動畫特效

1、使用純css實現(xiàn)的win8開機加載的動畫特效今日給大家共享一款純css3實現(xiàn)的win8加載動畫。在這款實例中動畫效果徹低由css3實現(xiàn)。一起看下效果圖：實現(xiàn)的代碼。html代碼： 復制代碼代碼如下:windows 8 css3代碼： 復制代碼代碼如下:bodymargin: 0;padding: 0;background-color: 90da15;.wrappposition: absolute;top: 50%;left: 50%;width: 600px;height: 300px;margin: -150px 0 0 -300px;-webkit-perspective: 30px;-

2、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

3、; perspective: 30px; transform: translatex(0px);animation: wrapp 400ms 800ms ease-in forwards;.textposition: 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-tran

4、sform: 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;h1float: right;font-family: "segoe ui", frutiger, &

5、quot;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;.logoposition: absolute;top: 50%;left: 50%;width: 90px;height: 90px

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

7、ms-animation: logo 500ms 300ms ease-out forwards; transform: translatex(0px) rotatey(10deg); animation: logo 500ms 300ms ease-out forwards;.logo .top-leftposition: absolute;top: 0;left: 0;width: 44px;height: 44px;border-right: solid 2px 90da15;border-bottom: solid 2px 90da15;.logo .bottom-rightposit

8、ion: 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-tran

9、sform: 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

10、) 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)

11、 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(0p