为什么腿跟舌头实现不了
来源：2-11 汉克狗的腿和脚
qq_夏末盛放_0
2019-11-15 16:02:44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
:root{
--hl: #1b2f90;
--bg: #f9f9f6;
--white: #f9f9f6;
--time: 2s;
--time4: calc(var(--time) * 4);
--color1: #ffc400;
--color2: #003bff;
--color3: #e79101;
--color4: #671316;
--gray: #ccc
}
*{margin:0;padding:0;}
body{background:orange;}
.dog{
width:300px;
height: 400px;
position:relative;
background-color:orange;
margin: 0 auto;
}
.center{position: absolute;
left:50%;
transform:translate(-50%,0);}
.forcehead{
width: 102px;
height:68px;
border-radius:51px/60px 60px 8px 8px;
background:var(--bg);
z-index:1;
}
.face{
width:110px;
height:68px;
background:var(--bg);
border-radius:50%;
top:20px;
position:absolute;
z-index:1;
}
.chin{
width:104px;
height:36px;
background:var(--bg);
border-radius:52px/0 0 36px 36px;
top:50px;
position:absolute;
z-index:1;
}
.ear{
width:16px;
height: 70px;
background-color: var(--hl);
border-radius:50%;
position:absolute;
left: 50%;
top:30px;
transform:translate(-40px,0) rotate(20deg);
z-index:0;
}
.ear.right{
transform:scale(-1,1) translate(-30px,0) rotate(20deg);
/*background-color: re*//*d;*/
}
.birthmark{
width:36px;
height: 33px;
background:var(--hl);
left: 50%;
position:absolute;
z-index: 1;
border-radius: 18px/25px 30px 3px 8px;
transform: translate(6px,12px);
}
.eye{
overflow: hidden;
width:24px;
height: 24px;
background-color: var(--bg);
border-radius:12px/20px 12px 12px 4px;
box-shadow: 2px 0px 0px -1px #000 inset,-1px -1px 7px 3px #bbb;
position:absolute;
left: 50%;
top:25px;
z-index:2;
transform:rotate(10deg) translate(-35px,0px);
}
.eye.right{
transform:scale(-1,1) translate(-10px,-5px);
}
.puil{
width: 26px;
height:26px;
background-color: #e79101;
border-radius: 50%;
top:3px;
left:3px;
position:absolute;
box-shadow: 0 0 6px 0 #000 inset;
}
.puil::before{
content: '';
width: 18px;
height: 18px;
background-color: #000;
border-radius:50%;
top:3px;
left: 5px;
position: absolute;
}
.puil::after{
content: '';
width: 5px;
height: 5px;
background-color: #fff;
border-radius:50%;
top:3px;
left: 5px;
position: absolute;
}
.nose{
width: 50px;
height:20px;
background-color: #363035;
border-radius: 50%/35% 35% 65% 65%;
position: absolute;
left: 50%;
transform:translate(-25px,43px);
z-index:2;
}
.nose::before{
content:'';
width:45px;
height: 10px;
background:#fff;
border-radius:50%/0 0 10px 10px;
position:absolute;
left:50%;
background: linear-gradient(30deg, #fff 0%, #fff 5%, #aaa 20%, #363035 100%);
transform:translate(-22px,3px);
opacity: 0.8;
}
.nose .nostril{
width: 5px;
height:12px;
background:linear-gradient(0deg,#363035 0%,#000 100%);
position:absolute;
left:50%;
border-radius:50%;
transform:rotate(40deg) translate(8px,0);
}
.nostril.right{
transform:scale(-1,1) translate(15px,4px) rotate(40deg);
}
.mouth{width: 60px;
height:20px;
border-radius:50%/0 0 20px 20px;
position:absolute;
left: 50%;
background-color: #671316;
box-shadow: 0 0 6px 0 #000 inset;
z-index: 1;
transform:translate(-30px,61px);
}
.teeth{
width:5px;
height:5px;
background-color: #fff;
border-radius:50%/0 0 0 100%;
position:absolute;
left:50%;
transform:translate(-5px,0);
}
.teeth.n02{transform:scale(-1,1);
border-right: .5px solid gray;}
}
.blue{
width: 30px;
height:20px;
background-color: #a2504f;
border-radius:50%/0 0 50% 50%;
position:absolute;
left: 50%;
z-index:1;
}
.body{
width:66px;
height:70px;
background-color: var(--bg);
border-radius:50%;
position:absolute;
left: 50%;
top:74px;
transform:translate(-50%,0);
}
.arm{
width: 26px;
height:40px;
background-color: var(--bg);
border-radius: 50%/25px 0 0 15px;
position:absolute;
transform:translate(-10px,0) rotate(22deg);
top:3px;
}
.arm.right{
transform:scale(-1,1) translate(-50px,0) rotate(22deg);
}
.arm::before{
content:'';
width:6px;
height: 28px;
border-radius: 6px/8px 0 0 20px;
position:absolute;
left: 50%;
box-shadow: -1px 0 0 0px #ddd;
top:3px;
}
.leg{
width:29px;
height:50px;
position:absolute;
left:50%;
border-radius: 50%/0 25px 25px 25px;
background-color: linear-gradient(-80deg, #000 0%, var(--bg) 17%, var(--bg) 100%);
transform: translate(100px, 0);
}
</style>
</head>
<body>
<div class="dog center">
<header>
<div class="forcehead 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="puil"></div>
</div>
<div class="eye right">
<div class="puil"></div>
</div>
<div class="nose">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
<div class="mouth">
<div class="teeth n01"></div>
<div class="teeth n02"></div>
<div class="blue center"></div>
</div>
</header>
<section 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"></div>
</div>
<div class="belly">
</div>
</section>
</div>
</body>
</html>
1回答
-
好帮手慕码
2019-11-15
同学你好，舌头是因为没有布局，建议如下：
效果：
腿部是背景颜色的问题：
效果：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题