纯css3制作写轮眼开眼及进化过程

  1 *{margin:0;padding:0;}
  2 .container{ width:800px; 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 0.5s ease-in 7s;
121     -webkit-animation:colour 0.5s ease-in 7s;
122     -o-animation:colour 0.5s ease-in 7s;
123 }
124 @keyframes colour{
125     0%{
126         background:#000;
127     }
128     100%{
129         background:#f00;
130     }
131 }
132 @-webkit-keyframes colour{
133     0%{
134         background:#000;
135     }
136     100%{
137         background:#f00;
138     }
139 }
140 @-o-keyframes colour{
141     0%{
142         background:#000;
143     }
144     100%{
145         background:#f00;
146     }
147 }
148 .hook{
149     width:92%;
150     height:92%;
151     position:absolute;
152     right:0;
153     left:0;
154     top:5%;
155     margin:0 auto;
156     border-radius:60%;
157 }
158 .hook .bar{
159     display:block;
160     width:100%;
161     height:100%;
162     position:absolute;
163     left:0;
164     top:0;
165     border-radius:60%;
166 }
167 .hook .bar b{
168     display:block;
169     width:8px;
170     height:8px;
171     background:#000;
172     position:absolute;
173     left:0;
174     bottom:0;
175     border-radius:60%;
176 }
177 .hook .bar b:after{
178     content:"";
179     width:8px;
180     height:8px;
181     border-color:transparent transparent #000 transparent;
182     border-style:solid;
183     border-width:0 0 5px 0;
184     position:absolute;
185     top:-1px;
186     left:-3px;
187     z-index:100;
188     border-radius:0 0 0 70%;
189     transform:rotate(-75deg);
190     -webkit-transform:rotate(-75deg);
191     -o-transform:rotate(-75deg);
192 }
193 .hook .bar:nth-child(1){
194     transform:rotate(10deg);
195     -webkit-transform:rotate(10deg);
196     -o-transform:rotate(10deg);
197 }
198 .hook .bar:nth-child(2){
199     transform:rotate(130deg);
200     -webkit-transform:rotate(130deg);
201     -o-transform:rotate(130deg);
202 }
203 .hook .bar:nth-child(3){
204     transform:rotate(250deg);
205     -webkit-transform:rotate(250deg);
206     -o-transform:rotate(250deg);
207 }
208 .tube{
209     width:93%;
210     height:93%;
211     position:absolute;
212     right:0;
213     left:0px;
214     top:2px;
215     margin:0 auto;
216     background:#000;
217     border-radius:60%;
218 }
219 .tube .bar{
220     display:block;
221     width:10px;
222     height:20px;
223     border-style:solid;
224     border-width:0 0 0 10px;
225     border-color:transparent transparent transparent black;
226     position:absolute;
227     border-radius:100% 0 0 0;
228 }
229 .tube .bar:nth-child(1){
230     top:-10px;
231     left:2px;
232     transform:rotate(-10deg);
233 }
234 .tube .bar:nth-child(2){
235     bottom:0px;
236     right:-10px;
237     transform:rotate(105deg);
238     -webkit-transform:rotate(105deg);
239     -o-transform:rotate(105deg);
240 }
241 .tube .bar:nth-child(3){
242     bottom:-3px;
243     left:-10px;
244     transform:rotate(235deg);
245     -webkit-transform:rotate(235deg);
246     -o-transform:rotate(235deg);
247 }
248 .trans{
249     width:130px;
250     height:70px;
251     position:absolute;
252     overflow:hidden;
253     top:0;
254     left:0;
255     border-radius:0 70px 0 50px;
256 }
257 .trans .bar{
258     display:block;
259     width:9px;
260     height:9px;
261     background:#000;
262     position:absolute;
263     top:50%;
264     z-index:2;
265     margin:-4px 0 0 -4px;
266     border-radius:60%;
267 }
268 .trans .bar:after{    
269     content:"";
270     display:block;
271     width:11px;
272     height:12px;
273     position:absolute;
274     top:-13px;
275     left:-13px;
276     z-index:100;
277     border-radius:60%;
278     background:rgba(250,250,250,.85);
279 }
280 .pullLeft .trans .bar{
281     transform:skewX(-15deg);
282     -webkit-transform:skewX(-15deg);
283     -o-transform:skewX(-15deg);
284 }
285 .pullLeft .trans .bar{left:48%;}
286 .pullRight .trans .bar{
287     transform:skewX(-15deg) scale(-1,1);
288     -webkit-transform:skewX(-15deg) scale(-1,1);
289     -o-transform:skewX(-15deg) scale(-1,1);
290 }
291 .pullRight .trans .bar{right:48%;}
292 .ani-narrow{
293     animation:ani-narrow 0.5s linear 1s;
294     -webkit-animation:ani-narrow 0.5s linear 1s;
295     -o-animation:ani-narrow 0.5s linear 1s;
296 }
297 @keyframes ani-narrow{
298     from{
299         transform:scale(1);
300     }
301     to{
302         opacity:0;
303         transform:scale(0);
304     }
305 }
306 @-webkit-keyframes ani-narrow{
307     from{
308         -webkit-transform:scale(1);
309     }
310     to{
311         opacity:0;
312         -webkit-transform:scale(0);
313     }
314 }
315 @-o-keyframes ani-narrow{
316     from{
317         -o-transform:scale(1);
318     }
319     to{
320         opacity:0;
321         -o-transform:scale(0);
322     }
323 }
324 .ani-zoom{
325     animation:ani-zoom 11s linear 0.8s;
326     -webkit-animation:ani-zoom 11s linear 0.8s;
327     -o-animation:ani-zoom 11s linear 0.8s;
328 }
329 @keyframes ani-zoom{
330     0%{
331         opacity:0;
332         transform:scale(0);
333     }
334     6%{
335         opacity:1;
336         transform:scale(1);
337     }
338     95%{
339         opacity:1;
340         transform:scale(1);
341     }
342     100%{
343         opacity:0;
344         transform:scale(1.5);
345     }
346 }
347 @-webkit-keyframes ani-zoom{
348     0%{
349         opacity:0;
350         -webkit-transform:scale(0);
351     }
352     6%{
353         opacity:1;
354         -webkit-transform:scale(1);
355     }
356     95%{
357         opacity:1;
358         -webkit-transform:scale(1);
359     }
360     100%{
361         opacity:0;
362         -webkit-transform:scale(1.5);
363     }
364 }
365 @-o-keyframes ani-zoom{
366     0%{
367         opacity:0;
368         -o-transform:scale(0);
369     }
370     6%{
371         opacity:1;
372         -o-transform:scale(1);
373     }
374     95%{
375         opacity:1;
376         -o-transform:scale(1);
377     }
378     100%{
379         opacity:0;
380         -o-transform:scale(1.5);
381     }
382 }
383 .ani-rotateHook{
384     animation:ani-rotateHook 5s ease-in 2.5s;
385     -webkit-animation:ani-rotateHook 5s ease-in 2.5s;
386     -o-animation:ani-rotateHook 5s ease-in 2.5s;
387 }
388 @keyframes ani-rotateHook{
389     0%{
390         opacity:0;
391         transform:scale(0) rotate(0);
392     }
393     15%{
394         opacity:1;
395         transform:scale(1) rotate(-360deg);
396     }
397     90%{
398         opacity:1;
399         transform:scale(1) rotate(-360deg);
400     }
401     100%{
402         opacity:0;
403         transform:scale(1.8) rotate(-540deg);
404     }
405 }
406 @-webkit-keyframes ani-rotateHook{
407     0%{
408         opacity:0;
409         -webkit-transform:scale(0) rotate(0);
410     }
411     15%{
412         opacity:1;
413         -webkit-transform:scale(1) rotate(-360deg);
414     }
415     90%{
416         opacity:1;
417         -webkit-transform:scale(1) rotate(-360deg);
418     }
419     100%{
420         opacity:0;
421         -webkit-transform:scale(1.8) rotate(-540deg);
422     }
423 }
424 @-o-keyframes ani-rotateHook{
425     0%{
426         opacity:0;
427         -o-transform:scale(0) rotate(0);
428     }
429     15%{
430         opacity:1;
431         -o-transform:scale(1) rotate(-360deg);
432     }
433     90%{
434         opacity:1;
435         -o-transform:scale(1) rotate(-360deg);
436     }
437     100%{
438         opacity:0;
439         -o-transform:scale(1.8) rotate(-540deg);
440     }
441 }
442 .ani-rotateTube{
443     animation:ani-rotateTube 5s ease-in-out 6.5s;
444     -webkit-animation:ani-rotateTube 5s ease-in-out 6.5s;
445     -o-animation:ani-rotateTube 5s ease-in-out 6.5s;
446 }
447 @keyframes ani-rotateTube{
448     0%{
449         opacity:0;
450         transform:scale(0) rotate(0);
451     }
452     30%{
453         opacity:1;
454         transform:scale(1) rotate(-360deg);
455     }
456     100%{
457         opacity:1;
458         transform:scale(1) rotate(-360deg);
459     }
460 }
461 @-webkit-keyframes ani-rotateTube{
462     0%{
463         opacity:0;
464         -webkit-transform:scale(0) rotate(0);
465     }
466     30%{
467         opacity:1;
468         -webkit-transform:scale(1) rotate(-360deg);
469     }
470     100%{
471         opacity:1;
472         -webkit-transform:scale(1) rotate(-360deg);
473     }
474 }
475 @-o-keyframes ani-rotateTube{
476     0%{
477         opacity:0;
478         -o-transform:scale(0) rotate(0);
479     }
480     30%{
481         opacity:1;
482         -o-transform:scale(1) rotate(-360deg);
483     }
484     100%{
485         opacity:1;
486         -o-transform:scale(1) rotate(-360deg);
487     }
488 }
489 .ani-shadow{
490     animation:ani-shadow 1s linear 11s;
491     -webkit-animation:ani-shadow 1s linear 11s;
492     -o-animation:ani-shadow 1s linear 11s;
493 }
494 @keyframes ani-shadow{
495     0%{
496         opacity:0;
497         box-shadow:none;
498     }
499     100%{
500         opacity:1;
501         box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
502     }
503 }
504 @-webkit-keyframes ani-shadow{
505     0%{
506         opacity:0;
507         box-shadow:none;
508     }
509     100%{
510         opacity:1;
511         box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
512     }
513 }
514 @-o-keyframes ani-shadow{
515     0%{
516         opacity:0;
517         box-shadow:none;
518     }
519     100%{
520         opacity:1;
521         box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000;
522     }
523 }
524 .ani-narrow,
525 .ani-zoom,
526 .ani-rotateHook,
527 .ani-rotateTube,
528 .ani-shadow,
529 .eyes .line:after{
530     animation-fill-mode:both;
531     -webkit-animation-fill-mode:both;
532     -o-animation-fill-mode:both;
533 }