跟着老师敲的，舌头和嘴巴的z-index属性不起作用

跟着老师敲的，舌头和嘴巴的z-index属性不起作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        :root{
            --hl: #1b2f90;
            --bg: #f9f9f6;
        }
        body{
            background-color: #ffc400;
        }
        .dog{
            width: 300px;
            height: 400px;
            position: relative;
        }
        .center{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
        }
        .forehead{
            width: 102px;
            height: 48px;
            background-color: var(--bg);
            border-radius: 51px / 40px 40px 8px 8px;
        }
        .face{
            width: 110px;
            height: 68px;
            background-color: var(--bg);
            border-radius: 50%;
            top: 20px;
            z-index: 1;
        }
        .chin{
            width: 104px;
            height: 36px;
            background-color: var(--bg);
            border-radius: 52px / 0 0 36px 36px;
            top: 60px;
            z-index: 1;
        }
        .ear{
            width: 16px;
            height: 70px;
            background-color: 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-color: var(--hl);
            border-radius: 15px / 17px 23px 2px 13px;
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 10px;
            transform: translate(16px,0) rotate(-10deg);
        }
        .eye{
            width: 24px;
            height: 24px;
            background-color: 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 0 #000 inset,-1px 0 5px 1px #ddd;
            overflow: hidden;
        }
        .eye.right{
            transform: scale(-1,1) translate(-20px,0) rotate(10deg);
            box-shadow: 1px 0 0 0 #000 inset;
        }
        .pupil{
            width: 26px;
            height: 26px;
            background-color: #e79101;
            border-radius: 50%;
            position: absolute;
            left: 3px; 
            top: 1px;
            box-shadow: 0 0 8px 0 #000 inset;
        }
        .pupil:before{
            width: 18px;
            height: 18px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            content: "";
        }
        .pupil:after{
            width: 5px;
            height: 5px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 3px;
            top: 7px;
            content: "";
        }
        .nose{
            width: 62px;
            height: 32px;
            top: 42px;
            background-color: #363035;
            border-radius: 31px / 10px 10px 22px 22px;
            z-index: 3;
        }
        .nose:before{
            content: "";
            width: 60px;
            height: 10px;
            border-radius: 30px / 8px 8px 2px 2px;
            position: absolute;
            left: 50%;
            top: 1px;
            transform: translate(-50%,0);
            background: linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);
        }
        .nostril{
            width: 15px;
            height: 4px;
            top: 19px;
            background: linear-gradient(0deg, #363035 0%, #000 100%);
            position: absolute;
            left: 50%;
            border-radius: 50%;
            transform: translate(-21px,0) rotate(30deg);
        }
        .nostril.right{
            transform: scale(-1,1) translate(-7px,0) rotate(30deg);
        }
        .mouth{
            width: 68px;
            height: 25px;
            background-color: #671316;
            border-radius: 34px / 0 0 27px 27px;
            z-index: 1;
            box-shadow: 0 0 4px 0 #000 inset;
            top: 68px;
        }
        .mouth:before{
            width: 68px;
            height: 8px;
            background-color: var(--bg);
            border-radius: 34px / 0 0 5px 5px;
            content: "";
            display: block;
            z-index: 1;
        }
        .teen{
            width: 8px;
            height: 3px;
            background-color: var(--bg);
            border-radius: 4px / 0 0 0 1px;
            position: absolute;
            left: 50%;
            top: 7px;
            transform: translate(-8px,0);
            z-index: 1;
        }
        .teen.right{
            transform: scale(-1,1) translate(0,0);
            border-right: .5px solid #ddd;
        }
        .tongue{
            width: 34px;
            height: 14px;
            background: #a2504f;
            border-radius: 17px / 0 0 7px 7px;
            z-index: 0;
            box-shadow: 0 0 4px 0 #111 inset;
            top: 0px;
        }
    </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="tongue center"></div>
            <div class="teen"></div>
            <div class="teen right"></div>
        </div>
    </div>
</body>
</html>
三年没洗澡 2019-03-27
源自：项目：CSS3实现汉克狗   2-8 汉克狗的牙齿和舌头
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
Steve007 2019-03-27 17:38:47

同学，你好。

可能是浏览器版本的原因，z-index经常会出现不生效的原因，这里可以将舌头的z-index设为-1来实现效果。

http://img1.sycdn.imooc.com//climg/5c9b448f000176e908960250.jpg

祝学习愉快！

0
收起回答
  • 提问者 三年没洗澡 #1
    不是，我找到原因了，是嘴唇没有定位
    2019-03-27 17:39:46
  • Steve007 回复 提问者 三年没洗澡 #2
    同学，你好。希望将修改后的代码上传一下，老师查看一下效果。
    2019-03-27 17:51:46
  • 提问者 三年没洗澡 回复 Steve007 #3
    啊，我没有保存，就是在.mouth:before里加上绝对定位就好了
    2019-03-27 17:55:54
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么嘴巴是上面在动？
5 1 3
为什么给label设置z-index没有效果呢？
71 2 10
z-index默认设置
2 0 3
嘴巴舌头问题
4 1 1
舌头不能定位在嘴巴上层伪元素与嘴巴之中
13 0 2

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师