老师，狗狗的鼻子为什么显示不出来呢

来源：2-6 汉克狗的鼻子

宝慕林4199460

2019-05-15 23:56:15

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>卡通狗</title>
<style type="text/css">
:root{
--hl:#1b2f90;
--bg:#f9f9f6;
}
body{
background: #ffc400;
}
.dog{
width: 300px;
height: 400px;
position: relative;
}
.center{
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.forehead{
width: 102px;
height: 48px;
background: var(--bg);
border-radius: 51px/ 40px 40px 8px 8px;
z-index: 1;
}
.face{
width: 110px;
height: 68px;
background: var(--bg);
border-radius: 50%;
top: 20px;
z-index: 1;

}
.chin{
width: 104px;
height: 36px;
background: var(--bg);
border-radius: 50%;
top: 60px;
border-radius: 52px/0px 0px 36px 36px;
z-index: 1;
}
.ear{
width: 16px;
height: 70px;
background: var(--hl);
border-radius: 50%; 
position: absolute;
z-index: 0;
left: 50%;
top: 34px;
transform-origin: 50% 0;
transform: translate(-42px,0) rotate(10deg) ;
} 
.ear.right{
transform:scale(-1,1) translate(-26px,0) rotate(10deg) ;
}
.birthmark{
width:30px;
height:36px;
background: var(--hl);
border-radius: 15px /17px 23px 2px 13px;
position: absolute;
z-index: 1;
left: 50%;
top: 10px;
transform: translate(15px,0) rotate(-10deg);
}
.eye{
width:24px;
height:24px;
background: var(--bg);
border-radius: 12px/ 13px 12px 12px 2px; 
position: absolute;
z-index: 2;
left: 50%;
top: 20px;
transform-origin: 50% 0;
transform: translate(-44px,0) rotate(10deg) ;
box-shadow: 1px 0 0 0px #000 inset,-1px 0px 5px 1px #ddd;
overflow: hidden;
}
.eye.right{
transform:scale(-1,1) translate(-18px,0) rotate(10deg) ;
box-shadow: box-shadow: 1px 0 0 0px #000 inset;
}
.pupil{
width: 26px;
height: 26px;
background:#e79101;
border-radius: 50%;
position: absolute;
left: 3px;
top: 1px;
box-shadow: 0 0 8px 0 inset;
}
.pupil::before{
width: 18px;
height:18px;
background: #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
content: "";
}
.pupil::after{
width: 5px;
height:5px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 3px;
top: 7px;
content: "";
}
.nose{
width: 62px;
height: 32px;
top: 42px;
z-index: 1;
background: #000;
border-radius:31px / 10px 10px 22px 22px;

}
.nostril{
width: 15px;
height: 4px;
top: 42px;
background: #000;
position: absolute;
left: 50%;
border-radius:31px/ 10px 10px 22px 22px;
transform: rotate(30deg);
}


</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">
  <div class="nostril"></div>
  <div class="nostril right"></div>
  </div>
  </div>  
</body>
</html>

写回答

1回答