<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>
主要用了绝对定位 和圆角的代码 一块一块的拼出来个人感觉还挺可爱的
我是一个小白才刚开始学习这些方面的知识 希望能够得到各位大神指点
做成后成品大概就是这个样子
