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>