吃胖版的小丸子。。。。的头。。。。
![]()
附上代码吧。代码复制了保存在记事本中。然后记事本后缀改成html。chorme运行正常。不知道其他的怎么样。不会写浏览器兼容。。_(:з」∠)_- 小丸子吃胖了*{ margin: 0px; padding: 0px;}body{ background: #fff;}#Chi-biMaruko{ margin: 50px auto; width: 400px; }.head{ width: 230px; height: 100px; background:#000; border-radius:100px 100px 0px 0px; position: relative; transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg);}#hair_1{ width: 0; height: 0; transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); border-top: 58px solid black; border-right: 50px solid rgba(251,220,199,1); position: absolute; left: 80px; top: 53px; } #hair_2{ width: 0; height: 0; transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); border-top: 40px solid black; border-right: 40px solid rgba(251,220,199,1); position: absolute; left: 40px; top: 66px; } #hair_3{ width: 0; height: 0; border-top: 33px solid black; border-right: 20px solid rgba(251,220,199,1); position: absolute; left: 23px; top: 70px; } #hair_4{ width: 0; height: 0; transform:rotate(3deg); -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); border-top: 30px solid black; border-right: 23px solid rgba(251,220,199,1); position: absolute; left: 0px; top: 82px; } #hair_5{ width: 0; height: 0; transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); border-top: 40px solid black; border-right: 30px solid rgba(251,220,199,1); position: absolute; left: 135px; top: 67px; } #hair_6{ width: 0; height: 0; transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); border-top: 30px solid black; border-right: 23px solid rgba(251,220,199,1); position: absolute; left: 170px; top: 82px; } #hair_7{ width: 0; height: 0; transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); border-top: 25px solid black; border-right: 18px solid rgba(251,220,199,1); position: absolute; left: 195px; top: 90px; } .head_2{ width: 230px; height: 180px; background: rgba(251,220,199,1); position: absolute; top: 100px; left: 0px; z-index: -1; transform: rotate(-1deg); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); border-radius: 0px 0px 115px 115px; } .brow_left{ border: 4px solid #000; width: 80px; height: 80px; position: absolute; top: 80px; left: 15px; border-radius: 50px 30px 40px 30px; transform: rotate(120deg); -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); } .brow_left:after{ content: ""; width: 73px; height: 100px; position: absolute; bottom: 3px; left: 26px; background: rgba(251,220,199,1); transform: rotate(-22deg); -webkit-transform:rotate(-22deg); -moz-transform:rotate(-22deg); } #keepOut_1{ background: #FBDCC7; width: 10px; height: 10px; position: absolute; top: 77px; left: 36px; z-index: 1; } #keepOut_2{ background: #FBDCC7; width: 20px; height: 20px; position: absolute; bottom: 63px;}#keepOut_3{ background: #FBDCC7; width: 40px; height: 10px; position: absolute; top: 27px; right: 50px; transform: rotate(-50deg); -webkit-transform: rotate(-50deg);}.brow_right{ border: 4px solid #000; width: 80px; height: 80px; position: absolute; top: 90px; left: 90px; border-radius: 50px 30px 40px 30px; transform: rotate(140deg); -webkit-transform:rotate(140deg); -moz-transform:rotate(140deg); } .brow_right:after{ content: ""; width: 73px; height: 100px; position: absolute; bottom: 0px; left: 17px; background: rgba(251,220,199,1); transform: rotate(-62deg); -webkit-transform:rotate(-62deg); -moz-transform:rotate(-62deg); } #keepOut_4{ background: #FBDCC7; width: 90px; height: 25px; position: absolute; top: 55px; left: 15px; transform: rotate(-50deg); -webkit-transform: rotate(-28deg);}#eyesLeft{ border: 4px solid #000; width: 80px; height: 80px; position: absolute; top: 130px; left: 15px; border-radius: 50px 30px 90px 30px; transform: rotate(150deg); -webkit-transform:rotate(150deg); -moz-transform:rotate(150deg);}#eyesLeft:after{ content: ""; width: 86px; height: 90px; position: absolute; bottom: 11px; left: 0px; background: rgba(251,220,199,1); transform: rotate(27deg); -webkit-transform: rotate(27deg); -moz-transform: rotate(27deg);}#keepOut_5{ background: #FBDCC7; width: 20px; height: 20px; position: absolute; top: 40; right: 76;}#keepOut_6{ background: #FBDCC7; width: 20px; height: 20px; position: absolute; top: 64px; right: 29;}#eyesRight{ border: 4px solid #000; width: 40px; height: 40px; position: absolute; top: 125px; left: 120px; border-radius: 111px 120px 130px 110px; transform: rotate(150deg); -webkit-transform:rotate(150deg); -moz-transform:rotate(150deg);}#keepOut_7{ width: 50px; height: 60px; position: absolute; bottom: 1px; left: 11px; background: rgba(251,220,199,1); transform: rotate(-30deg); -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg);}#keepOut_8{ background: #FBDCC7; width: 20px; height: 20px; position: absolute; bottom: 20px; right: 30;}#mouth{ background: rgb(251, 220, 199); width: 20px; height: 20px; position: absolute; border-radius: 100%; top: 230px; left: 110px; border: 2px solid;}#keepOut_9{ background: rgb(251, 220, 199); width: 30px; height: 30px; position: absolute; top: 217px; left: 106px; transform: ratote(-20deg); -webkit-transform: rotate(-20deg);}#blusherLeft{ background: rgb(247, 157, 167); width: 20px; height: 20px; position: absolute; border-radius: 100%; top: 200px; left: 30px;}#blusherRight{ background: rgb(247, 157, 167); width: 20px; height: 20px; position: absolute; border-radius: 100%; top: 200px; left: 190px;}
复制代码
妈妈我再也不装逼了。QAQ |