一墩难求,花了一两个小时自己画了一个,HTML结构很简单,CSS上主要就是将各个位置定位,肚子上的logo就只有发挥啦
以下是HTML代码
<div class="container"> <div class="m_body"></div> <div class="ear_l"></div> <div class="ear_r"></div> <div class="arm_l"></div> <div class="arm_r"></div> <div class="face f_green"></div> <div class="face f_yelow"></div> <div class="face f_blue"></div> <div class="face f_purple"></div> <div class="face f_shy_blue"></div> <div class="eye_l"></div> <div class="eye_r"></div> <div class="nose"></div> <div class="mouth"></div> <div class="logo"> <img src="./img/logo_d.png" alt=""> </div> <div class="leg_l"></div> <div class="leg_r"></div> </div>
以下是CSS样式
body {background: rgb(177, 251, 251);} .container {margin: auto;width: 500px;height: 500px;position: relative;text-align: center;} .m_body {width: 300px;height: 350px;border: #333 8px solid;margin: 50px auto; border-radius: 90% 90% 60% 65% / 85% 85% 98% 90%;background: #fff;position: absolute;z-index: 2;} .ear_l,.ear_r {background: #393939;width: 80px;height: 100px;border-radius: 50%; position: absolute;z-index: 1;} .ear_l {left: 30px;top: 50px; } .ear_r {left: 210px;top: 50px;} .arm_l,.arm_r {background: #333;position: absolute;z-index: 1;} .arm_l {width: 70px;height: 120px;left: -50px;top: 240px;transform: rotate(45deg);border-radius: 35% 60% 90% 90%/ 55% 85% 90% 60%;} .arm_r {width: 70px;height: 150px;left: 300px;top: 162px;transform: rotate(37deg); border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;} .arm_r:before,.arm_r:after {content: "";width: 18px;height: 26px;background: #bc242c; position: absolute;border-top-left-radius: 50%;border-top-right-radius: 50%;} .arm_r:before {transform: rotate(45deg);left: 26px;top: 20px;} .arm_r:after {transform: rotate(-45deg);left: 19px;top: 20px;} .face {position: absolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%;position: absolute;z-index: 3;} .f_green {border: #96c882 5px solid;width: 230px;height: 180px;left: 38px;top: 90px;} .f_yelow {border: #EAC65B 5px solid;width: 220px;height: 172px;left: 43px;top: 94px;} .f_blue {border: #0489be 5px solid;width: 210px;height: 164px;left: 48px;top: 98px;} .f_purple {border: #AF2350 4px solid;width: 203px;height: 157px;left: 52px; top: 103px;} .f_shy_blue {border: #6BCDF3 4px solid;width: 195px;height: 149px;left: 56px;top: 107px;} .eye_l,.eye_r {background: #333;width: 60px;height: 80px;border-radius: 50%;position: absolute;z-index: 4;} .eye_l:before,.eye_r:before {position: absolute;content: ''; width: 24px;height: 24px; border-radius: 50%;border: 4px solid #fff;z-index: 5; } .eye_l:after,.eye_r:after {position: absolute;content: ''; width: 8px;height: 8px;background: #9B9B9B;border-radius: 50%;z-index: 6; } .eye_l:after {right: 25px;top: 25px;} .eye_r:after {left: 26px; top: 26px;} .eye_l:before {left: 20px;top: 12px; } .eye_r:before {left: 10px;top: 12px; } .eye_l { left: 80px; top: 130px; transform: rotate(45deg); } .eye_r {left: 175px;top: 130px;transform: rotate(-45deg);} .nose {background: #333;position: absolute;left: 145px;top: 180px;z-index: 6;} .nose, .nose:before,.nose:after {width: 25px;height: 16px; border-radius: 45px 42px 60px 61px/ 30px 30px 50px 46px; } .mouth { width: 60px;height: 50px;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%; background: #333;left: 128px;top: 200px;position: absolute;z-index: 7;} .mouth::before {content: '';width: 50px;height: 16px;left: 5px;top: -1px; position: absolute;background: #fff;z-index: 8;border-radius: 50%; } .mouth:after { content: '';width: 45px;height: 24px; border-radius: 30% 30% 60% 60%/ 50% 54% 80% 90%; background: #B3272A; position: absolute;z-index: 9;top: 23px;left: 8px;} .logo {position: absolute; z-index: 10;top: 290px;left: 110px;} .logo img {width: 100px; } .leg_l,.leg_r {background: #333;position: absolute;width: 70px; height: 90px;border-radius: 0 0 30px 30px;z-index: 1;} .leg_l {left: 60px;top: 390px;} .leg_r {left: 190px;top: 390px;} .leg_l:after, .leg_r:after { content: "";width: 43px; height: 30px; position: absolute;background: #363636;border-radius: 30px; } .leg_l:after {bottom: 0;right: -3px;} .leg_r:after {bottom: 0;left: -3px;}
效果展示