嘴巴舌头问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cartoon dog</title>
<style type="text/css">
body{
background-color: khaki;
}
:root{
--h1:#1b2f90;
--bg:#f9f9f6;
--t:3s;
}
.head,.face,.chin{
position: absolute;
left:50%;
transform: translate(-50%,0);
}
.dog{
width:300px;
height: 400px;
position: relative;
margin: 0 auto;
}
.head{
width:102px;
height:48px;
background:var(--bg);
border-radius:50px/40px 40px 8px 8px;
}
.face{
width:110px;
height:68px;
background:var(--bg);
top:20px;
border-radius: 50%;
}
.chin{
width:104px;
height:56px;
background:var(--bg);
top:40px;
border-radius: 50px/8px 8px 40px 40px;
}
.ear{
width:16px;
height:70px;
background:#000;
border-radius: 50%;
position: absolute;
z-index: -1;
left: 50%;
top:34px;
transform: translate(-48px,0) rotate(20deg);
animation: rotate var(--t) ease-out infinite;
transform-origin: center 0;
}
.ear.right{
transform: scale(-1,1) translate(-37px,0) rotate(20deg);
animation: rotate-r var(--t) ease-out infinite;
}
.eye{
width:24px;
height:24px;
background:var(--bg);
border-radius: 12px/13px 12px 12px 2px;
position: absolute;
z-index: 1;
left: 50%;
top:24px;
transform: translate(-46px,0) rotate(20deg);
box-shadow:2px 0px 0 0 #000 inset, -1px -1px 5px 1px #ddd;
overflow: hidden;
}
.eye.right{
transform: scale(-1,1) translate(-22px,0) rotate(20deg);
}
.birthmark{
width:30px;
height:36px;
background-color: black;
border-radius: 15px/17px 23px 18px 1px;
position: absolute;
left: 56%;
top:16px;
transform: scale(-1,1) rotate(25deg);
}
.pupil{
width:26px;
height:26px;
background:#e79101;
border-radius: 50%;
position: absolute;
left: 4px;
top:1px;
transform: scale(-1,1) rotate(25deg);
box-shadow: 0 0 8px 0 #000 inset;
animation: translate var(--t) ease-in-out infinite;
}
.pupil::before{
content: "";
width:18px;
height:18px;
background-color: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
.pupil::after{
content: "";
width:4px;
height:4px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(100%,-200%);
border-radius: 50%;
}
.nose{
width:62px;
height:32px;
background-color: #363035;
top: 44px;
border-radius: 50%;
left:50%;
transform: translate(-54%);
border-radius: 31px/10px 10px 22px 22px;
position: absolute;
z-index: 2;
}
.nose::before{
content:"";
width:60px;
height:15px;
position: absolute;
left: 50%;
top: 1px;
transform: translate(-50%,0);
background:linear-gradient(30deg,#fff 0%,#fff 8%,#b1aeb1 18%,#b1aeb1 50%,#544653 100%);
border-radius: 30px/10px 10px 3px 3px;
}
.nostirl{
width:15px;
height:4px;
background:linear-gradient(0deg,#363035 0%,#000 100%);
position: absolute;
left:10px;
top:19px;
border-radius: 50%;
transform: translate(2px,0px) rotate(20deg);
animation: resize var(--t) ease-in-out infinite;
}
.nostirl.right{
transform: scale(-1,1) translate(-25px,0) rotate(20deg);
}
.mouth{
width:68px;
height:17px;
position:absolute;
left:50%;
top:76px;
transform: translate(-50%);
background-color: #673136;
border-radius: 34px/0px 0px 17px 17px;
box-shadow: 0px 0px 5px 0px inset;
z-index: 1;
overflow: hidden;
animation: shou var(--t) ease-in-out infinite;
}
.mouth::before{
content: "";
z-index: 3;
position:absolute;
display: block;
width:68px;
height:7px;
background:var(--bg);
border-radius: 34px/0px 0px 7px 7px;
}
.teen{
width:8px;
height:3px;
background-color: var(--bg);
position: absolute;
left: 50%;
top:82px;
z-index: 3;
transform: translate(-10px);
}
.teen.right{
transform: scale(-1,1) translate(1px);
}
.tongue{
width:34px;
height:14px;
background-color:#a2504f;
border-radius: 17px/0px 0px 7px 7px;
position: absolute;
left: 25%;
top:0px;
box-shadow: 0px 0px 5px 0px inset;
z-index: 2;
animation: shen var(--t) ease-in-out infinite;
}
.body{
width:66px;
height:70px;
background:var(--bg);
border-radius: 50%;
top:89px;
}
.arm{
width:26px;
height:40px;
background:var(--bg);
border-radius: 13px/20px 0 14px 20px;
position: absolute;
top:10px;
transform:translate(-14px,0) rotate(21deg);
}
.arm::before{
content:"";
width:5px;
height: 20px;
border-radius:5px/10px 0 0 10px ;
box-shadow: -1px 0 1px 0 #bbb;
position: absolute;
top:12px;
left:18px;
transform: rotate(-7deg);
}
.arm.right{
transform: scale(-1,1) translate(-56px,0) rotate(21deg);
}
.leg{
width:29px;
height:50px;
border-radius: 15px/5px 5px 25px 45px;
position: absolute;
top:40px;
transform:translate(2px,0);
background:linear-gradient(-85deg,#bbb 0%,#eee 20%,#fff 100%)
}
.leg.right{
transform: scale(-1,1) translate(-36px,0);
}
.foot{
width:29px;
height:15px;
border-radius: 15px/12px 12px 3px 3px;
position: absolute;
bottom:-8px;
background:linear-gradient(-120deg,#bbb 0%,#eee 20%,#fff 100%)
}
.belly{
z-index: 2;
width:60px;
height:36px;
border-radius: 30px/0px 0px 36px 36px;
background:linear-gradient(0deg,#bbb 0%,#eee 20%,#fff 100%);
top:40px;
left: 4px;
position: absolute;
}
@keyframes rotate{
0%{ transform: translate(-46px,0) rotate(20deg);}
50%{ transform: translate(-46px,0) rotate(40deg);}
100%{transform: translate(-46px,0) rotate(20deg);}
}
@keyframes rotate-r{
0%{ transform:scale(-1,1) translate(-30px,0) rotate(20deg);}
50%{ transform:scale(-1,1) translate(-30px,0) rotate(40deg);}
100%{transform:scale(-1,1) translate(-30px,0) rotate(20deg);}
}
@keyframes translate{
0%{left:3px;}
50%{left:6px}
100%{left:3px}
}
@keyframes resize{
0%{height:4px;}
50%{height:2px}
100%{height:4px}
}
@keyframes shou{
0%{height:17px;}
50%{height:15px}
100%{height:17px}
}
@keyframes shen{
0%{top:0px;}
50%{top:5px}
100%{top:0px}
}
</style>
</head>
<body>
<div class="dog">
<div class="head"></div>
<div class="face"></div>
<div class="chin"></div>
<div class="ear"></div>
<div class="ear right"></div>
<div class="eye">
<div class="pupil">
</div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
<div class="birthmark"></div>
<div class="nose">
<div class="nostirl"></div>
<div class="nostirl right"></div>
</div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="teen"></div>
<div class="teen right"></div>
<div class="body dog">
<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>
</div>
</div>
</body>
</html>老师这个舌头为什么伸不出来到了下嘴巴就消失了
4
收起
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星