radi 圓角 index round near linear posit 開始 圖片

今天用html和css嘗試的畫了一個機器貓 做的可能有點粗糙 求各位大神指點

css代碼如下

<style> main{ width: 400px; height: 800px; margin: 0 auto; position: relative; } .l1{ width: 314px; height: 314px; border-radius: 157px; background: #0daad3; position: relative;} .l2{width: 264px; height: 240px; border-radius: 120px /132px; background: white; position: absolute;bottom: 10px; left: 25px; border: 3px solid black;} .y1{height: 80px; width:70px; border-radius: 35px;background: white;position: absolute; border:3px solid black; left: 50px; top:-30px; } .y2{height: 80px; width:70px; border-radius: 35px;background: white;position: absolute; border:3px solid black; left: 130px; top:-30px;} .yz1{width: 16px; height: 16px; border-radius: 8px; background: black; position: absolute; bottom: 15px; right: 10px;} .yz2{width: 16px; height: 16px; border-radius: 8px; background: black; position: absolute; bottom: 15px; left: 10px;} .bz{ width: 32px; height: 32px; background: #ca3e01; position: absolute; border-radius: 16px; left: 110px; top: 39px;border: 2px solid black; } .b2{ width: 3px; height: 84px; background: black; position: absolute; left: 126px; top: 73px; } .zb{ height: 36px; width: 170px; border-radius: 0 0 85px 85px/0 0 32px 32px; background: red; position: absolute; top: 121px; left: 46px; border-bottom: 3px solid black; background: none;} .hz{width: 80px; height: 1px;background: black; } .hz1{position: absolute;left: 29px;top: 100px;} .hz2{position: absolute; left: 29px; top: 80px; transform: rotate(15deg);} .hz3{position: absolute; left: 29px; top: 120px; transform: rotate(-15deg);} .hz4{position: absolute;left: 145px;top: 100px;} .hz5{position: absolute; left: 145px; top: 80px; transform: rotate(-15deg);} .hz6{position: absolute; left: 145px; top: 120px; transform: rotate(15deg);} .bz2{ width: 230px; height: 20px; position: absolute; background: #b93300; border:2px solid black; border-radius: 10px; left: 10px; bottom: -10px; } .ld{width: 40px; height: 40px; border-radius: 20px;background: #c7bc0a; position: absolute;left: 110px; top: 242px;} .ld1{ height: 2px; width: 36px; border: 2px solid #333333;position: absolute; top: 10px; border-radius: 10px;} .ld2{ width: 12px; height: 12px; background: black; border-radius: 6px;position: absolute;top: 20px; left: 14px; } .ld3{width: 3px; height: 8px; background: black; position: absolute;bottom: 0; left: 18px;} .gb{height: 45px; width: 150px;background: #0daad3; position: relative;transform: rotate(-40deg);z-index: -3; left: -20px; border:1px solid black;} .s1{height: 60px; width: 60px; border-radius: 30px; background: white; position: absolute; border: 1px solid black;left: -46px; top: -9px;z-index:-4;} .gb1{ height: 45px; width: 150px;background: #0daad3; position: relative;transform: rotate(220deg);z-index: -3; left: 187px; border:1px solid black; top:-45px; } .s2{height: 60px; width: 60px; border-radius: 30px; background: white; position: absolute; border: 1px solid black;left: -46px; top: -9px;} .dz{ width: 170px; height: 170px;background: white; border-radius: 85px; border:1px solid black; z-index: -1;position: relative; left: 73px; top: -109px;} .kd{ width: 132px; height: 66px; border-radius: 0 0 66px 66px; border: 2px solid black; position: absolute;top: 78px; left: 17px;} .st{ width: 220px; height: 170px; background:#0daad3;position: relative;z-index: -2; top: -240px;left: 49px; border-top: none; } .t1{ width: 24px; height: 12px; background: white; border-radius:12px 12px 0 0; border: 3px solid black; position: absolute; bottom: -1px; left: 98px; border-bottom: none;} .j1{height: 32px; width: 110px; position: absolute;bottom: -32px; left:-7px; background: white;border: 2px solid black;border-radius: 30px; } .j2{height: 32px; width: 110px; position: absolute;bottom: -32px; right:-12px; background: white;border: 2px solid black;border-radius: 30px; } .g1{width: 20px; height: 75px; background: red; border-radius: 20px; position: relative; top: -392px; left: -22px;animation: pdg 0.3s linear infinite; } .gba1{ position: absolute; left: -9px;z-index: 1;width: 40px; height: 150px; background: gray;border-radius: 20px;top: 57px;} .g2{width: 20px; height: 75px; background: red; border-radius: 20px; position: relative; top: -459px; left: 322px; animation: ypdg 0.3s linear infinite; } .gba2{ position: absolute; left: -9px;z-index: 1;width: 40px; height: 150px; background: gray;border-radius: 20px;top: 57px;} @keyframes pdg{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } @keyframes ypdg{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> html代碼如下 <body> <main> <div class="l1"> <div class="l2"> <div class="y1"> <div class="yz1"></div> </div> <div class="y2"> <div class="yz2"></div> </div> <div class="bz"></div> <div class="b2"></div> <div class="zb"></div>
<div class="hz hz1"></div> <div class="hz hz2"></div> <div class="hz hz3"></div> <div class="hz hz4"></div> <div class="hz hz5"></div> <div class="hz hz6"></div> <div class="bz2"></div> <div class="ld"> <div class="ld1"></div> <div class="ld2"></div> <div class="ld3"></div> </div> </div> </div> <div class="gb"> <div class="s1"></div> </div> <div class=" gb1"> <div class=" s2"></div> </div> <div class="dz"> <div class="kd"></div> </div> <div class="st"> <div class="t1"> </div> <div class="j1"></div> <div class="j2"></div> </div> <div class="g1"> <div class="gba1"></div> </div> <div class="g2"> <div class="gba2"></div> </div> </main> </body> 主要用了絕對定位 和圓角的代碼 一塊一塊的拼出來個人感覺還挺可愛的 我是一個小白才剛開始學習這些方面的知識 希望能夠得到各位大神指點 做成後成品大概就是這個樣子

用html css畫機器貓