1 *{margin:0;padding:0;}
2 .container{width:750px;height:200px;margin:30px auto;overflow:hidden;background:#000;position:relative;}
3 .eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
4 .pullLeft{left:100px;}
5 .pullRight{right:100px;}
6 .profile{
7 width:130px;
8 height:70px;
9 background:#fff;
10 position:absolute;
11 top:0;
12 left:0;
13 overflow:hidden;
14 border-radius:0 70px 0 50px;
15 }
16 .shadow{
17 display:block;
18 width:130px;
19 height:70px;
20 position:absolute;
21 top:0;
22 z-index:5;
23 border-radius:0 90px 0 60px;
24 box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
25 }
26 .skewLeft{
27 transform:skewX(15deg);
28 -webkit-transform:skewX(15deg);
29 -o-transform:skewX(15deg);
30 }
31 .skewRight{
32 transform:skewX(-15deg) scale(-1,1);
33 -webkit-transform:skewX(-15deg) scale(-1,1);
34 -o-transform:skewX(-15deg) scale(-1,1);
35 }
36 .basic{
37 width:60px;
38 height:60px;
39 background:#000;
40 position:absolute;
41 top:50%;
42 left:50%;
43 z-index:10;
44 margin-top:-30px;
45 border-radius:60%;
46 }
47 .basic:before{
48 content:"";
49 display:block;
50 width:10px;
51 height:11px;
52 position:absolute;
53 left:15px;
54 top:15px;
55 z-index:100;
56 border-radius:60%;
57 background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
58 -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
59 -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
60 }
61 .pullLeft .basic{
62 margin-left:-33px;
63 }
64 .pullRight .basic{
65 margin-left:-27px;
66 }
67 .eyes{
68 width:55px;
69 height:55px;
70 background:#ff0000;
71 position:absolute;
72 top:8px;
73 border-radius:60%;
74 box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
75 }
76 .pullLeft .eyes{left:35px;}
77 .pullRight .eyes{right:35px;}
78 .eyes .line{
79 width:64%;
80 height:64%;
81 background:#ff0000;
82 position:absolute;
83 right:0;
84 left:0;
85 top:10px;
86 margin:0 auto;
87 border-radius:60%;
88 box-shadow:0 0 2px 0 #b20000 inset;
89 }
90 .eyes .line:before{
91 content:"";
92 display:block;
93 width:10px;
94 height:11px;
95 position:absolute;
96 left:3px;
97 top:4px;
98 z-index:100;
99 border-radius:60%;
100 background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
101 -webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
102 -o-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
103 }
104 .eyes .line:after{
105 content:"";
106 display:block;
107 width:10px;
108 height:10px;
109 position:absolute;
110 background:#000;
111 right:0;
112 left:-1px;
113 top:13px;
114 z-index:100;
115 margin:0 auto;
116 border-radius:60%;
117 transform:rotate(150deg);
118 -webkit-transform:rotate(150deg);
119 -o-transform:rotate(150deg);
120 animation:colour 20s ease-in infinite;
121 -webkit-animation:colour 20s ease-in infinite;
122 -o-animation:colour 20s ease-in infinite;
123 }
124 @keyframes colour{
125 0%{background:#000;}
126 35%{background:#000;}
127 40%{background:#f00;}
128 100%{background:#f00;}
129 }130 @-webkit-keyframes colour{
131 0%{background:#000;}
132 35%{background:#000;}
133 40%{background:#f00;}
134 100%{background:#f00;}
135 }136 @-o-keyframes colour{
137 0%{background:#000;}
138 35%{background:#000;}
139 40%{background:#f00;}
140 100%{background:#f00;}
141 }142 /*******三勾玉 开始*******/
143 .hook{
144 width:92%;
145 height:92%;
146 position:absolute;
147 right:0;
148 left:0;
149 top:5%;
150 margin:0 auto;
151 border-radius:60%;
152 }
153 .hook .bar{
154 display:block;
155 width:100%;
156 height:100%;
157 position:absolute;
158 left:0;
159 top:0;
160 border-radius:60%;
161 }
162 .hook .bar b{
163 display:block;
164 width:8px;
165 height:8px;
166 background:#000;
167 position:absolute;
168 left:0;
169 bottom:0;
170 border-radius:60%;
171 }
172 .hook .bar b:after{
173 content:"";
174 width:8px;
175 height:8px;
176 border-color:transparent transparent #000 transparent;
177 border-style:solid;
178 border-width:0 0 5px 0;
179 position:absolute;
180 top:-1px;
181 left:-3px;
182 z-index:100;
183 border-radius:0 0 0 70%;
184 transform:rotate(-75deg);
185 -webkit-transform:rotate(-75deg);
186 -o-transform:rotate(-75deg);
187 }
188 .hook .bar:nth-child(1){
189 transform:rotate(10deg);
190 -webkit-transform:rotate(10deg);
191 -o-transform:rotate(10deg);
192 }
193 .hook .bar:nth-child(2){
194 transform:rotate(130deg);
195 -webkit-transform:rotate(130deg);
196 -o-transform:rotate(130deg);
197 }
198 .hook .bar:nth-child(3){
199 transform:rotate(250deg);
200 -webkit-transform:rotate(250deg);
201 -o-transform:rotate(250deg);
202 }
203 /*******三勾玉 结束*******/
204 /*******万花筒 开始*******/
205 .tube{
206 width:93%;
207 height:93%;
208 position:absolute;
209 right:0;
210 left:0px;
211 top:2px;
212 margin:0 auto;
213 background:#000;
214 border-radius:60%;
215 }
216 .tube .bar{
217 display:block;
218 width:10px;
219 height:20px;
220 border-style:solid;
221 border-width:0 0 0 10px;
222 border-color:transparent transparent transparent black;
223 position:absolute;
224 border-radius:100% 0 0 0;
225 }
226 .tube .bar:nth-child(1){
227 top:-10px;
228 left:2px;
229 transform:rotate(-10deg);
230 }
231 .tube .bar:nth-child(2){
232 bottom:0px;
233 right:-10px;
234 transform:rotate(105deg);
235 -webkit-transform:rotate(105deg);
236 -o-transform:rotate(105deg);
237 }
238 .tube .bar:nth-child(3){
239 bottom:-3px;
240 left:-10px;
241 transform:rotate(235deg);
242 -webkit-transform:rotate(235deg);
243 -o-transform:rotate(235deg);
244 }
245 /*******万花筒 结束*******/
246 /*******轮回眼 开始*******/
247 .trans{
248 width:130px;
249 height:70px;
250 position:absolute;
251 overflow:hidden;
252 top:0;
253 left:0;
254 border-radius:0 70px 0 50px;
255 }
256 .trans .bar{
257 display:block;
258 width:9px;
259 height:9px;
260 background:#000;
261 position:absolute;
262 top:50%;
263 z-index:2;
264 margin:-4px 0 0 -4px;
265 border-radius:60%;
266 }
267 .trans .bar:after{
268 content:"";
269 display:block;
270 width:11px;
271 height:12px;
272 position:absolute;
273 top:-13px;
274 left:-13px;
275 z-index:100;
276 border-radius:60%;
277 background:rgba(250,250,250,.85);
278 }
279 .pullLeft .trans .bar{
280 transform:skewX(-15deg);
281 -webkit-transform:skewX(-15deg);
282 -o-transform:skewX(-15deg);
283 }
284 .pullLeft .trans .bar{left:48%;}
285 .pullRight .trans .bar{
286 transform:skewX(-15deg) scale(-1,1);
287 -webkit-transform:skewX(-15deg) scale(-1,1);
288 -o-transform:skewX(-15deg) scale(-1,1);
289 }
290 .pullRight .trans .bar{right:48%;}
291 /*******轮回眼 结束*******/
292 .ani-narrow{
293 animation:ani-narrow 20s ease-out infinite;
294 -webkit-animation:ani-narrow 20s ease-out infinite;
295 -o-animation:ani-narrow 20s ease-out infinite;
296 }
297 @keyframes ani-narrow{
298 0%{opacity:1;transform:scale(1);}
299 5%{opacity:1;transform:scale(1);}
300 10%{opacity:0;transform:scale(0);}
301 87%{opacity:0;transform:scale(0);}
302 90%{opacity:1;transform:scale(1);}
303 100%{opacity:1;transform:scale(1);}
304 }305 @-webkit-keyframes ani-narrow{
306 0%{opacity:1;-webkit-transform:scale(1);}
307 5%{opacity:1;-webkit-transform:scale(1);}
308 10%{opacity:0;-webkit-transform:scale(0);}
309 87%{opacity:0;-webkit-transform:scale(0);}
310 90%{opacity:1;-webkit-transform:scale(1);}
311 100%{opacity:1;-webkit-transform:scale(1);}
312 }313 @-o-keyframes ani-narrow{
314 0%{opacity:1;-o-transform:scale(1);}
315 5%{opacity:1;-o-transform:scale(1);}
316 10%{opacity:0;-o-transform:scale(0);}
317 87%{opacity:0;-o-transform:scale(0);}
318 90%{opacity:1;-o-transform:scale(1);}
319 100%{opacity:1;-o-transform:scale(1);}
320 }321 .ani-zoom{
322 animation:ani-zoom 20s linear infinite;
323 -webkit-animation:ani-zoom 20s linear infinite;
324 -o-animation:ani-zoom 20s linear infinite;
325 }
326 @keyframes ani-zoom{
327 0%{opacity:0;transform:scale(0);}
328 5%{opacity:0;transform:scale(0);}
329 8%{opacity:1;transform:scale(1);}
330 60%{opacity:1;transform:scale(1);}
331 62%{opacity:0;transform:scale(1.5);}
332 100%{opacity:0;transform:scale(0);}
333 }334 @-webkit-keyframes ani-zoom{
335 0%{opacity:0;-webkit-transform:scale(0);}
336 5%{opacity:0;-webkit-transform:scale(0);}
337 8%{opacity:1;-webkit-transform:scale(1);}
338 60%{opacity:1;-webkit-transform:scale(1);}
339 62%{opacity:0;-webkit-transform:scale(1.5);}
340 100%{opacity:0;-webkit-transform:scale(0);}
341 }342 @-o-keyframes ani-zoom{
343 0%{opacity:0;-o-transform:scale(0);}
344 5%{o
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理