body { margin:0; padding:0; } /*身体*/ .wrapper { width:300px; margin:100px auto; } .litteH { position:relative; } .bodyH { position:absolute; width:240px; height:400px; border:5px solid #000; border-radius:115px; background:rgb(249,217,70); overflow:hidden; z-index:2; } /*裤子*/ .bodyH .condoleBelt { position:absolute; } .bodyH .trousers { position:absolute; bottom:0; width:100%; height:100px; border-top:6px solid #000; background:rgb(32,116,160); } .trousers_top { width:160px; height:60px; border:6px solid #000; border-bottom:none; border-radius:0 0 5px 5px; background:rgb(32,116,160); position:absolute; bottom:100px; left:34px; } /*吊带*/ .bodyH .condoleBelt .left,.bodyH .condoleBelt .right { width:100px; height:16px; border:5px solid #000; background:rgb(32,116,160); position:absolute; top:-90px; left:-35px; z-index:2; -webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left { top:-88px; left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:after { content:''; width:8px; height:8px; border-radius:50%; background:#000; position:absolute; top:4px; left:88px; } .bodyH .condoleBelt .left:after { left:5px; } /*裤子修饰*/ .pocket { width:60px; height:45px; border:6px solid #000; border-radius:0px 0px 25px 25px; position:absolute; bottom:65px; left:84px; } .line_right { width:30px; height:30px; border-bottom-left-radius:100px; border-bottom:6px solid #000; border-left:6px solid #000; position:absolute; left:0; bottom:60px; -webkit-transform:rotate(-75deg); } .line_left { width:30px; height:30px; border-bottom-right-radius:100px; border-bottom:6px solid #000; border-right:6px solid #000; position:absolute; right:0; bottom:63px; -webkit-transform:rotate(75deg); } .line_bottom { height:40px; border:3px solid #000; border-radius:3px; position:absolute; left:118px; bottom:0px; } /*眼睛*/ .eyes { position:relative; z-index:3; } .eyes .leftEye,.eyes .rightEye { width:85px; height:85px; border-radius:50%; border:6px solid #000; background:#fff; position:absolute; top:60px; left:27px; } .eyes .leftEye { left:124px; } .eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye { width:40px; height:40px; border-radius:50%; background:#000; position:absolute; top:24px; left:22px; } .eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white { width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:7px; left:17px; } .eyes .leftEye .left_blackEye .left_white { top:4px; left:17px; } .eyes .leftEye:after,.eyes .rightEye:after { content:''; width:28px; height:18px; background:#000; position:absolute; left:-30px; top:37px; -webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after { left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); } /*嘴巴*/ .mouse { position:relative; } .mouse .mouse_shape { width:55px; height:35px; border:5px solid #000; border-bottom-left-radius:30px; background:#fff; position:absolute; top:175px; left:98px; z-index:3; -webkit-transform:rotate(-35deg); } .mouse .mouse_shape:after { content:''; width:70px; height:32px; border-bottom:5px solid #000; border-radius:35px 26px 5px 5px; background:red; position:absolute; top:-16px; left:3px; -webkit-transform:rotate(34deg); } .mouse .mouse_shape:after { content:''; width:70px; height:32px; border-bottom:5px solid #000; border-radius:35px 26px 5px 5px; background:rgb(249,217,70); position:absolute; top:-16px; left:3px; -webkit-transform:rotate(34deg); -webkit-animation:mouse_mask 5s ease-in-out infinite; } /*手*/ .hands { position:relative; } .hands .leftHand,.hands .rightHand { width:80px; height:80px; border:6px solid #000; border-radius:25px; background:rgb(249,217,70); position:absolute; top:220px; left:-23px; -webkit-transform:rotate(40deg); } .hands .leftHand { left:182px; top:220px; -webkit-transform:rotate(-40deg); } .hands .leftHand:after,.hands .rightHand:after { content:''; width:6px; border:3px solid #000; border-radius:3px; position:absolute; left:13px; top:50px; -webkit-transform:rotate(90deg); } .hands .leftHand:after { left:53px; top:50px; -webkit-transform:rotate(-90deg); } /*脚*/ .feet { position:relative; } .feet .left_foot,.feet .right_foot { width:36px; height:50px; border-bottom-right-radius:6px; border-bottom-left-radius:9px; background:#000; position:absolute; top:406px; left:88px; -webkit-transform-origin:right top; } .feet .left_foot { border-bottom-right-radius:9px; border-bottom-left-radius:6px; left:130px; -webkit-transform-origin:left top; } .feet .left_foot:after,.feet .right_foot:after { content:''; width:60px; height:35px; border-radius:20px 10px 21px 15px; background:#000; position:absolute; left:-36px; top:14.4px; -webkit-transform:rotate(5deg); } .feet .left_foot:after { border-radius:10px 20px 15px 21px; left:13px; -webkit-transform:rotate(-5deg); } /*头发*/ .hair { position:relative; } .left_hair_one { width:130px; height:100px; border-radius:50%; border-top:8px solid #000; position:absolute; left:17px; top:-17px; -webkit-transform:rotate(27deg); } .left_hair_two { width:80px; height:80px; border-radius:50%; border-top:6px solid #000; position:absolute; left:45px; top:-10px; -webkit-transform:rotate(15deg); } /*脚底阴影*/ .groundShadow { width:200px; height:2px; border-radius:50%; background:rgba(0,0,0,0.3); box-shadow:0 0 2px 4px rgba(0,0,0,0.3); position:relative; top:455px; left:25px; } /*小黄人各个部位动态*/ .left_hair_one { -webkit-animation:lefthair 2s ease-in-out infinite; } @-webkit-keyframes lefthair { 0%,25%,31%,100% { }30% { -webkit-transform:rotate(31deg) translate3d(-3px,-1px,0); } }.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye { -webkit-animation:blackeye 5s ease-in infinite; } @-webkit-keyframes blackeye { 0%,20%,50%,70%,100% { -webkit-transform:translateX(0px); } 30%,40% { -webkit-transform:translateX(15px); } 80%,90% { -webkit-transform:translateX(-15px); } }.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white { -webkit-animation:whiteeye 5s ease-in-out infinite; } @-webkit-keyframes whiteeye { 0%,20%,50%,70%,100% { -webkit-transform:translateX(0px); } 30%,40% { -webkit-transform:translate3d(3px,4px,0); } 80%,90% { -webkit-transform:translate3d(-15px,4px,0); } }.mouse .mouse_shape { -webkit-animation:mouse 5s ease-in-out infinite; } @-webkit-keyframes mouse { 40%,43% { width:45px; height:25px; top:180px; } 0%,35%,48%,100% { width:55px; height:35px; top:175px; -webkit-transform:rotate(-35deg); } }.mouse .mouse_shape:after { -webkit-animation:mouse_mask 5s ease-in-out infinite; } @-webkit-keyframes mouse_mask { 40%,43% { width:60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100% { width:70px; top:-16px; left:3px; -webkit-transform:rotate(33deg); } }.hands .rightHand { -webkit-animation:rightHand .8s ease-in-out infinite; } @-webkit-keyframes rightHand { 0%,50%,100% { -webkit-transform:rotate(40deg); } 30% { -webkit-transform:rotate(37deg) translateX(1px); } }.hands .leftHand { -webkit-animation:leftHand .8s ease-in-out infinite; } @-webkit-keyframes leftHand { 0%,50%,100% { -webkit-transform:rotate(-40deg); } 80% { -webkit-transform:rotate(-37deg) translateX(-1px); } }.feet .right_foot { -webkit-animation:rightfoot .8s ease-in-out infinite; } @-webkit-keyframes rightfoot { 0%,50%,100% { -webkit-transform:rotate(0deg); } 80% { -webkit-transform:rotate(10deg); } }.feet .left_foot { -webkit-animation:leftfoot .8s ease-in-out infinite; } @-webkit-keyframes leftfoot { 0%,50%,100% { -webkit-transform:rotate(0deg); } 30% { -webkit-transform:rotate(-10deg); } }
一款纯CSS实现的小黄人动态图