肚腩那里可以帮我看下吗 设置了2但是把身体部分遮住了
来源：2-12 汉克狗最终动画效果
张凤梅
2020-02-03 17:43:45
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
:root{
--hl:#1b2f90;/*蓝色*/
--bg:#f9f9f9;/*白色*/
}
body{
background: #ffc400;
}
.dog{
width: 300px;height: 400px;
position: relative;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);
z-index:1;
}
.forehead{
width: 102px;height: 48px;
background: var(--bg);
border-radius: 51px / 40px 40px 8px 8px;
}
.face{
width: 110px;height: 68px;
background:var(--bg);
border-radius:50%;
top: 20px;
}
.chin{
width:104px;height: 36px;
background:var(--bg);
border-radius:52%/0px 0px 36px 36px;
top:60px;
}
.ear{
width: 16px;height: 70px;
background: var(--hl);
position:absolute;
border-radius:50%;
left: 50%;top:34px;
transform:translate(-42px,0) rotate(10deg);
z-index: 0;
transform-origin:50% 0;
}
.ear.right{
transform:scale(-1,1) translate(-27px,0) rotate(10deg);
}
.eye{
width:24px;height:24px;
background:var(--bg);
position: absolute;
left: 50%;top: 20px;
z-index: 2;
transform-origin:50% 0;
transform: translate(-44px,0) rotate(10deg);
box-shadow:1px 0 0 0px #000 inset,-1px 0px 5px 1px #ddd;
border-radius:12px/13px 12px 12px 2px;
overflow: hidden;
}
.eye.right{
transform:scale(-1,1) translate(-19px,0) rotate(10deg);
box-shadow:1px 0 0 0px #000 inset;
}
.birthmark{
width: 30px;height:36px;
background: var(--hl);
z-index: 1;
border-radius:15px/17px 23px 2px 13px;
position: absolute;
left:50%;
top:10px;
transform:translate(15px,0) rotate(-10deg);
}
.pupil{
width: 26px;height: 26px;
background:#e79101;
border-radius:50%;
position: absolute;
left:3px;top: 1px;
box-shadow: 0 0 8px 0 #000 inset;
}
.pupil:before{
content:"";
width: 18px;height: 18px;
background:#000;
border-radius:50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.pupil:after{
content:"";
width: 5px;height: 5px;
background: #fff;
border-radius:50%;
position:absolute;
left: 3px;
top: 7px;
}
.nose{
width: 62px;height: 32px;
position:absolute;
top: 42px;
background: #363035;
border-radius:31px/10px 10px 24px 24px;
z-index: 3;
}
.nose:before{
content:"";
width: 60px;height:15px;
position: absolute;
left: 50%;top:1px;
background:linear-gradient(10deg,#fff 0%,#808080 8%,#ddd 100%);
border-radius:30px/8px 8px 2px 2px;
transform:translate(-50%,0);
}
.nostril{
width: 15px;height: 4px;
position: absolute;
left:50%;
top: 19px;
background:linear-gradient(0deg,#363035 0%,#000 100%);
border-radius:31px/10px 10px 24px 24px;
transform:translate(-24px,0) rotate(30deg);
}
.nostril.right{
transform: scale(-1,1) translate(-7px,0) rotate(30deg);
}
.mouth{
width: 68px;height: 27px;
background:#671316;
border-radius:34px/0px 0px 27px 27px;
z-index: 1;
box-shadow:0 0 4px 0 #000 inset;
left: 50%;
top: 68px;
}
.mouth:before{
content: "";
width: 68px;height: 8px;
background: var(--bg);
position:absolute;
left: 0;top: 0;
border-radius:34px/0px 0px 5px 5px;
z-index: 1;
}
.teen{
width: 8px;height: 3px;
background:var(--bg);
position: absolute;
left: 50%;top: 7px;
transform: translate(-8px,0);
border-radius: 4px/0px 0px 0px 1px;
z-index: 1;
}
.teen.right{
transform:scale(-1,1)translate(0px,0);
border-right:0.5px solid #ddd;
}
.tongue{
width: 34px;height: 14px;
background: #a2504f;
position:absolute;
left: 50%;top: 0;
border-radius:17px/0px 0px 11px 11px;
box-shadow:0 0 2px #111 inset;
z-index: 0;
}
.body{
width: 66px;height: 70px;
background: var(--bg);
top:89px;
border-radius:50%;
z-index: 0;
}
.arm{
width:26px;height:40px;
background: var(--bg);
position: absolute;
left:50%;
top: 5px;
border-radius:13px/20px 0px 14px 20px;
transform: translate(-43px,0) rotate(21deg);
}
.arm:before{
content: "";
width: 2px;height: 20px;
border-radius:1px/10px 0px 0px 10px;
box-shadow: -1px 0 0px 0 rgba(200,200,200,0.5);
position:absolute;
right:6px;top:14px;
transform: rotate(-5deg);
}
.arm.right{
transform: scale(-1,1) translate(-17px,0) rotate(21deg);
}
.leg{
width: 29px;height: 50px;
background:linear-gradient(-85deg,#ddd 0%,#ddd 5%,#fff 20%, #fff 100%);
position: absolute;
top:50%;left: 0px;
border-radius:14px/10px 10px 12px 36px;
}
.leg.right{
transform:scale(-1,1) translate(-36px,0);
}
.foot{
width: 29px;height: 15px;
background:linear-gradient(-120deg,#ddd 0%,#ddd 10%,#fff 30%, #fff 100%);
position:absolute;
left:2px;bottom:-8px;
border-radius:15px/10px 10px 5px 5px;
}
.belly{
z-index: 2;
width: 60px;height: 36px;
background:linear-gradient(0deg,#ddd 0%,#fff 20%, #fff 100%);
border-radius:30px/0 0 36px 36px;
position: absolute;
left: 50%;top: 0;
transform:translate(-50%,34px);
}
</style>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div><!--头部-->
<div class="face center"></div><!--脸部-->
<div class="chin center"></div><!-- 下巴-->
<div class="ear"></div><!--耳朵-->
<div class="ear right "></div><!--右耳朵-->
<div class="birthmark"></div><!-- 右眼睛环绕蓝色 -->
<div class="eye">
<div class="pupil"></div><!-- 眼球 -->
</div><!-- 眼睛 -->
<div class="eye right">
<div class="pupil"></div><!-- 眼球 -->
</div><!-- 右眼睛 -->
<!--鼻子-->
<div class="nose center">
<div class="nostril"></div><!--左鼻孔 -->
<div class="nostril right"></div><!-- 右鼻孔 -->
</div>
<!-- 嘴巴 -->
<div class="mouth center">
<div class="teen"></div><!-- 左牙齿 -->
<div class="teen right"></div><!-- 右牙齿 -->
<div class="tongue center"></div><!--舌头 -->
</div>
<!-- 身体 -->
<div class="body center">
<!-- 手臂 -->
<div class="arm"></div>
<!-- 右手臂 -->
<div class="arm right"></div>
<!-- 腿 -->
<div class="leg">
<!-- 脚 -->
<div class="foot"></div>
</div>
<!-- 右腿 -->
<div class="leg right">
<!-- 右脚 -->
<div class="foot right"></div>
</div>
<!-- 肚腩 -->
<div class="belly"></div>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕言
2020-02-03
同学你好，指的是下方箭头处，没有显示完整吗？
如果是的话，那么是因为类名为.belly的元素太宽了，覆盖掉了。建议：调整宽度。代码参考：
如果不是这里的话，建议利用图文详细描述下，老师帮助解答
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题