会动的小黄人

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset='utf-8'/>
 4 <head>
 5     <title>小黄人</title>
 6     <style type="text/css">
 7     .al{width: 1200px;height: 600px;margin: 0 auto;background:#96004A;padding: 50px 0 0 100px;}
 8     .xhr{width: 140px;height: 250px;position: relative;background: yellow;border-radius: 65px;animation:ss 1s infinite;}
 9     .hair{width: 1px;height: 26px;background: #000;position: absolute;z-index: 10;}
10     .hair1{left:70px;top:-13px;}
11     .hair2{left:85px;top:-13px;transform:rotate(30deg);}
12     .hair3{left:55px;top:-13px;transform:rotate(-30deg);}
13     .eyebg{width: 140px;height: 15px;background: #000;position: absolute;left:0;top:63px;z-index: 10;}
14     .eye1,.eye2{width: 45px;height: 45px;background: #dedede;position: absolute;z-index: 11;border-radius: 50%;border:1px solid #000;}
15     .eyec{width: 35px;height: 35px;background: #fff;position: absolute;border:1px solid #000;border-radius: 50%;top:4px;left:4px;}
16     .eyez{width: 9px;height:9px;position: absolute;background: #8f5444;border: 1px solid #000;border-radius: 50%;top:12px;left:12px;animation:zd 1s infinite;}
17     .eyez:after{content: '.';display: block;width: 5px;height: 5px;background: #000;position: absolute;border-radius: 50%;top:2px;left:2px;overflow: hidden;}
18     .eye1{top:48px;left: 16px;}
19     .eye2{top:48px;left: 75px;}
20     .kupan1{width: 35px;height: 30px;position: absolute;z-index: 12;background: #667AB3;transform:matrix(1,1.2,0,1,0,0);top:130px;}
21     .kupan2{width: 35px;height: 30px;position: absolute;z-index: 12;background: #667AB3;transform:matrix(-1,1.2,0,-1,0,0);top:130px;left:105px;}
22     .koudai1{width: 110px;height: 60px;background: #667AB3;position: absolute;z-index: 13;border-radius: 5px;top:150px;left:15px;}
23     .koudai1:before{content:'.';display: block;overflow: hidden;position: absolute;width: 8px;height: 8px;background: #000;border-radius: 50%;top:0;left:8px;}
24     .koudai1:after{content:'.';display: block;overflow: hidden;position: absolute;width: 8px;height: 8px;background: #000;border-radius: 50%;top:0;right:8px;}
25     .koudai2{width: 35px;height: 35px;position: absolute;z-index: 13px;border: 1px solid #000;border-radius: 0 0 8px 8px;left:37px;bottom: 0}
26     .koudai3{width: 21px;height: 21px;background: #000;position: absolute;border-radius: 50%;top:7px;left: 7px;}
27     .koudai3:after{content: '.';display: block;overflow: hidden;position: absolute; width: 9px;height: 9px;border: 2px solid #667AB3;top:4px;left: 4px;transform:rotate(45deg);}
28     .kuzi{width: 140px;height: 65px;position: absolute;z-index: 12;background: #667ab3;border-radius: 5px 5px 65px 65px;bottom: 0;left: 0;}
29     .yc{width: 57px;height: 30px;background: #fff;border:1px solid #000;position: absolute;z-index: 12;border-radius:20px 20px 30px 30px/ 10px 10px 30px 30px;left:41px;top:105px;animation:xp .5s infinite;}
30     .yc1{width: 57px;height: 1px;background: #000;position: absolute;top:14px;left: 0;}
31     .yc2{width: 1px;height: 30px;position: absolute;background: #000;top:0;left:28px;}
32     .yc2:before{width: 1px;height: 30px;display: block;overflow: hidden;content: '.';position: absolute;top:0;left:-14px;z-index: 13;background: #000;}
33     .yc2:after{width: 1px;height: 30px;display: block;overflow: hidden;content: '.';position: absolute;top:0;left:14px;z-index: 13;background: #000;}
34     .arm1{width: 20px;height: 80px;background: yellow;position: absolute;transform:rotate(45deg);top:70px;right: -25px;z-index: 9;}
35     .arm1:before{content: '.';display: block;width: 26px;height: 26px;background: #000;overflow: hidden;border-radius: 50%;top:-5px;right: -3px;position: absolute;}
36     .arm2{width: 20px;height: 80px;background: yellow;position: absolute;transform:rotate(-45deg);top:70px;left: -25px;z-index: 9;}
37     .arm2:before{content: '.';display: block;width: 26px;height: 26px;background: #000;overflow: hidden;border-radius: 50%;top:-5px;right: -3px;position: absolute;}
38     .leg1{width: 25px;height: 45px;position: absolute;background: #667ab3;z-index: 9;bottom: -28px;left:23px;}
39     .leg1:after{content:'.';overflow: hidden;display: block;width: 35px;height: 20px;background: #000;position: absolute;border-radius: 15px 0 0 5px;bottom: 0;left:-10px; }
40     .leg2{width: 25px;height: 45px;position: absolute;background: #667ab3;z-index: 9;bottom: -28px;right:23px;}
41     .leg2:after{content:'.';overflow: hidden;display: block;width: 35px;height: 20px;background: #000;position: absolute;border-radius:0 15px 5px 0;bottom: 0;right:-10px; }
42     @keyframes zd{
43         0%,50%,100%{left:12px;}25%{left:6px;}75%{left:18px;}
44     }
45     @Keyframes xp{
46         0%,50%,100{top:105px;}25%{top:106px;}75%{top:104px;}
47     }
48     @Keyframes ss{
49         0%,50%,100%{left:20px;}25%{left:10px;}75%{left:60px;}
50     }
51     </style>
52 </head>
53 <body>
54     <div class="al">
55         <div class="xhr">
56             <div class="hair1 hair"></div>
57             <div class="hair2 hair"></div>
58             <div class="hair3 hair"></div>
59             <div class="eyebg"></div>
60             <div class="eye1">
61                 <div class="eyec">
62                     <div class="eyez"></div>
63                 </div>
64             </div>
65             <div class="eye2">
66                 <div class="eyec">
67                     <div class="eyez"></div>
68                 </div>
69             </div>
70             <div class="kupan1"></div>
71             <div class="kupan2"></div>
72             <div class="koudai1">
73                 <div class="koudai2">
74                     <div class="koudai3"></div>
75                 </div>
76             </div>
77             <div class="kuzi"></div>
78             <div class="yc">
79                 <div class="yc1"></div>
80                 <div class="yc2"></div>
81             </div>
82             <div class="arm1"></div>
83             <div class="arm2"></div>
84             <div class="leg1"></div>
85             <div class="leg2"></div>
86         </div>
87     </div>
88 </body>
89 </html>