body { margin:0; } #view { width:500px; height:500px; margin:0px auto 0px auto; background:; position:relative; } /*头*/ #head { width:160px; height:175px; margin:auto; background:#ffe100; position:absolute; top:10%; left:35%; border-top-left-radius:45% 43%; border-top-right-radius:45% 43%; border-bottom-left-radius:50% 35%; border-bottom-right-radius:50% 35%; border:4px solid #000; border-bottom-color:#ffe100; } /*身体*/ #body { width:170px; height:185px; background:#ffe100; position:absolute; top:38%; left:34%; border-bottom-left-radius:45% 43%; border-bottom-right-radius:45% 43%; border-top-left-radius:30% 90%; border-top-right-radius:30% 90%; border:4px solid #000; } /*左耳朵*/ .ear_left { width:100px; height:100px; background-color:#ffe100; border-radius:100px 0px; border:4px solid #000; position:absolute; left:300px; } /*右耳朵*/ .ear_right { width:100px; height:100px; background-color:#ffe100; border-radius:0px 100px; border:4px solid #000; position:absolute; left:100px; } /*右耳朵黑色阴影*/ .ear_shading_right { width:38px; height:77px; background-color:#000; border-radius:14% 0% 100% 0%; position:absolute; left:370px; top:3px; } /*左耳朵黑色阴影*/ .ear_shading_left { width:38px; height:77px; background-color:#000; border-radius:0% 14% 0% 100%; position:absolute; left:100px; top:3px; } /*左脸蛋*/ .face_left { width:45px; height:45px; background-color:#ff2200; border-radius:50%; margin-top:100px; float:left; overflow:hidden; border:2px solid #000; } /*右脸蛋*/ .face_right { width:45px; height:45px; background-color:#ff2200; border-radius:50%; margin-top:100px; float:right; overflow:hidden; border:2px solid #000; } /*右眼睛*/ .eye_right { width:30px; height:30px; background-color:#000; border-radius:50%; position:absolute; left:20px; top:60px; overflow:hidden; } /*右眼白*/ .eye_shading_right { width:15px; height:15px; background-color:#fff; border-radius:50%; position:absolute; left:11px; } /*左眼睛*/ .eye_left { width:30px; height:30px; background-color:#000; border-radius:50%; position:absolute; left:110px; top:60px; overflow:hidden; } /*左眼白*/ .eye_shading_left { width:15px; height:15px; background-color:#fff; border-radius:50%; position:absolute; left:5px; } /*鼻子*/ .nose { width:15px; height:10px; background-color:#000; border-radius:50%; left:73px; top:88px; position:absolute; overflow:hidden; } /*嘴巴右*/ .mouth_right { width:35px; height:30px; background:#ffe100; position:absolute; top:67px; left:72px; border-radius:50%; border:3px solid #ffe100; border-bottom-color:#000; } /*嘴巴左*/ .mouth_left { width:35px; height:30px; background:#ffe100; position:absolute; top:67px; left:47px; border-radius:50%; border:3px solid #ffe100; border-bottom-color:#000; } /*舌头*/ .tongue { width:23px; height:3px; background:#ff2200; position:absolute; top:102px; left:66px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:3px solid #000; border-top-color:#ffe100; -webkit-animation:tongue 1s ease-in-out infinite; animation:tongue 1s ease-in-out infinite; } /*左胳膊*/ .arm_left { width:50px; height:65px; background:#ffe100; position:absolute; top:50px; left:20px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:4px solid #000; border-top-color:#ffe100; -webkit-transform:skew(16deg); transform:skew(16deg); } /*右胳膊*/ .arm_right { width:50px; height:65px; background:#ffe100; position:absolute; top:50px; left:95px; border-bottom-left-radius:40% 90%; border-bottom-right-radius:40% 90%; border:4px solid #000; border-top-color:#ffe100; -webkit-transform:skew(-16deg); transform:skew(-16deg); } /*左腿*/ .leg_left { position:absolute; width:47px; height:19px; border:4px solid #000; background:#ffe100; border-radius:80% 20% 80% 10%; top:356px; left:164px; } /*右腿*/ .leg_right { position:absolute; width:47px; height:19px; border:4px solid #000; background:#ffe100; border-radius:20% 80% 10% 80%; top:356px; left:293px; } /*尾巴上*/ .tail1 { width:127px; height:70px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:100px; left:-8px; } /*尾巴中*/ .tail2 { width:66px; height:149px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:134px; left:96px; } /*尾巴下*/ .tail3 { width:42px; height:87px; -webkit-transform:skew(-20deg); transform:skew(-20deg); background:#ffe100; border:4px solid #000; position:absolute; top:235px; left:140px; } /*尾巴阴影*/ .tail_shading { width:29px; height:183px; -webkit-transform:skew(16deg); transform:skew(16deg); background:#ffe100; position:absolute; top:113px; left:118px; } /*尾巴摇摆*/ .tail { -webkit-animation:tail 0.2s ease-in-out infinite; animation:tail 0.2s ease-in-out infinite; } /*吐舌头*/ @-webkit-keyframes tongue { 0% { height:3px; } 30% { width:20px; height:36px; } 100% { height:3px; } }/*吐舌头*/ @keyframes tongue { 0% { height:3px; } 30% { width:20px; height:36px; } 100% { height:3px; } }/*尾巴摇摆动画*/ @-webkit-keyframes tail { 0% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(0deg); } 60% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(10deg); } 100% { -webkit-transform-origin:250px 300px; -webkit-transform:rotateZ(0deg); } }/*尾巴摇摆动画*/ @keyframes tail { 0% { transform-origin:250px 300px; transform:rotateZ(0deg); } 60% { transform-origin:250px 300px; transform:rotateZ(10deg); } 100% { transform-origin:250px 300px; transform:rotateZ(0deg); } }
使用css实现的皮卡丘