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

Windows  /  管理员 发布于 5年前   285

　　今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class="wrapp">  
2.         <div class="text">  
3.             <h1>  
4.                 Windows 8</h1>  
5.         </div>  
6.         <div class="logo">  
7.             <span class="top-left"></span><span class="bottom-right"></span>  
8.         </div>  
9.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. body{   
2.     margin: 0;   
3.     padding: 0;   
4.     background-color: #90da15;   
5. }   
6. .wrapp{   
7.     position: absolute;   
8.     top: 50%;   
9.     left: 50%;   
10.     width: 600px;   
11.     height: 300px;   
12.     margin: -150px 0 0 -300px;   
13.     -webkit-perspective: 30px;   
14.     -webkit-transform: translateX(0px);   
15.     -webkit-animation: wrapp 400ms 800ms ease-in forwards;   
16.   
17.     -moz-perspective: 30px;   
18.     -moz-transform: translateX(0px);   
19.     -moz-animation: wrapp 400ms 800ms ease-in forwards;   
20.   
21.     -ms-perspective: 30px;   
22.     -ms-transform: translateX(0px);   
23.     -ms-animation: wrapp 400ms 800ms ease-in forwards;   
24.   
25.     perspective: 30px;   
26.     transform: translateX(0px);   
27.     animation: wrapp 400ms 800ms ease-in forwards;   
28. }   
29. .text{   
30.     position: absolute;   
31.     top: 50%;   
32.     left: 50%;   
33.     width: 0px;   
34.     height: 60px;   
35.     margin: -30px 0 0 -160px;   
36.     overflow: hidden;   
37.     -webkit-transform: translateX(0px);   
38.     -webkit-animation: text 400ms 800ms linear forwards;   
39.   
40.     -moz-transform: translateX(0px);   
41.     -moz-animation: text 400ms 800ms linear forwards;   
42.   
43.     -ms-transform: translateX(0px);   
44.     -ms-animation: text 400ms 800ms linear forwards;   
45.   
46.     transform: translateX(0px);   
47.     animation: text 400ms 800ms linear forwards;   
48. }   
49. h1{   
50.     float: rightright;   
51.     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;   
52.     font-weight: normal;   
53.     color: #fff;   
54.     padding: 0;   
55.     margin: 0;   
56.     width: 320px;   
57.     height: 60px;   
58.     font-size: 60px;   
59.     line-height: 60px;   
60. }   
61. .logo{   
62.     position: absolute;   
63.     top: 50%;   
64.     left: 50%;   
65.     width: 90px;   
66.     height: 90px;   
67.     margin: -45px 0 0 -45px;   
68.     background-color: #fff;   
69.     -webkit-transform: translateX(0px) rotateY(10deg);   
70.     -webkit-animation: logo 500ms 300ms ease-out forwards;   
71.   
72.     -moz-transform: translateX(0px) rotateY(10deg);   
73.     -moz-animation: logo 500ms 300ms ease-out forwards;   
74.   
75.     -ms-transform: translateX(0px) rotateY(10deg);   
76.     -ms-animation: logo 500ms 300ms ease-out forwards;   
77.   
78.     transform: translateX(0px) rotateY(10deg);   
79.     animation: logo 500ms 300ms ease-out forwards;   
80. }   
81. .logo .top-left{   
82.     position: absolute;   
83.     top: 0;   
84.     left: 0;   
85.     width: 44px;   
86.     height: 44px;   
87.     border-right: solid 2px #90da15;   
88.     border-bottom: solid 2px #90da15;   
89. }   
90. .logo .bottombottom-rightright{   
91.     position: absolute;   
92.     bottombottom: 0;   
93.     rightright: 0;   
94.     width: 44px;   
95.     height: 44px;   
96.     border-left: solid 2px #90da15;   
97.     border-top: solid 2px #90da15;   
98. }   
99.   
100. @-webkit-keyframes logo {   
101.     from {   
102.         -webkit-transform:  translateX(0px) rotateY(10deg);   
103.     }   
104.     to {   
105.         -webkit-transform:  translateX(0px) rotateY(-10deg);   
106.     }   
107. }   
108. @-webkit-keyframes text {   
109.     from {   
110.         width: 0px;   
111.         -webkit-transform: translateX(0px);   
112.     }   
113.     60%{   
114.         width: 0px;   
115.     }   
116.     to {   
117.         width: 320px;   
118.         -webkit-transform: translateX(240px);   
119.     }   
120. }   
121. @-webkit-keyframes wrapp {   
122.     from {   
123.         -webkit-transform: translateX(0px);   
124.     }   
125.     to {   
126.         -webkit-transform: translateX(-200px);   
127.     }   
128. }   
129. @-moz-keyframes logo {   
130.     from {   
131.         -moz-transform:  translateX(0px) rotateY(10deg);   
132.     }   
133.     to {   
134.         -moz-transform:  translateX(0px) rotateY(-10deg);   
135.     }   
136. }   
137. @-moz-keyframes text {   
138.     from {   
139.         width: 0px;   
140.         -moz-transform: translateX(0px);   
141.     }   
142.     60%{   
143.         width: 0px;   
144.     }   
145.     to {   
146.         width: 320px;   
147.         -moz-transform: translateX(240px);   
148.     }   
149. }   
150. @-moz-keyframes wrapp {   
151.     from {   
152.         -moz-transform: translateX(0px);   
153.     }   
154.     to {   
155.         -moz-transform: translateX(-200px);   
156.     }   
157. }   
158.   
159. @-ms-keyframes logo {   
160.     from {   
161.         -ms-transform:  translateX(0px) rotateY(10deg);   
162.     }   
163.     to {   
164.         -ms-transform:  translateX(0px) rotateY(-10deg);   
165.     }   
166. }   
167. @-ms-keyframes text {   
168.     from {   
169.         width: 0px;   
170.         -ms-transform: translateX(0px);   
171.     }   
172.     60%{   
173.         width: 0px;   
174.     }   
175.     to {   
176.         width: 320px;   
177.         -ms-transform: translateX(240px);   
178.     }   
179. }   
180. @-ms-keyframes wrapp {   
181.     from {   
182.         -ms-transform: translateX(0px);   
183.     }   
184.     to {   
185.         -ms-transform: translateX(-200px);   
186.     }   
187. }   
188. @keyframes logo {   
189.     from {   
190.         transform:  translateX(0px) rotateY(10deg);   
191.     }   
192.     to {   
193.         transform:  translateX(0px) rotateY(-10deg);   
194.     }   
195. }   
196. @keyframes text {   
197.     from {   
198.         width: 0px;   
199.         transform: translateX(0px);   
200.     }   
201.     60%{   
202.         width: 0px;   
203.     }   
204.     to {   
205.         width: 320px;   
206.         transform: translateX(240px);   
207.     }   
208. }   
209. @keyframes wrapp {   
210.     from {   
211.         transform: translateX(0px);   
212.     }   
213.     to {   
214.         transform: translateX(-200px);   
215.     }   
216. }