为什么嘴巴是上面在动？

为什么嘴巴是上面在动？

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

body{background-color:yellow;}

.dog{width: 200px;

height: 120px;

background-color: yellow;;

position: relative;

margin: 0px auto;

transform-origin: 50% 0px;}

.etou{width: 200px;

height: 100px;

position: absolute;

top: 8px;

border-radius: 100px/100px 100px 20px 20px;

background-color: #fff;z-index: 1;}

.lianjia{ width: 220px;

      height: 80px;

      position: absolute;

    top: 65px;

    left: -10px;

      background:#fff;

    border-radius: 100%;

    margin:0px auto;z-index: 1;}

   .xiaba{width: 200px;

      height: 60px;

      position: absolute;

    top: 115px;

    left: 50%;

    margin-left: -100px;

      background: #fff;

    border-radius: 100px/0px 0px 65px 65px;z-index: 1;}

   .erduo{width: 32px;

   height: 140px;

   background: blue;

   border-radius: 50%;

   left: 50%;

   transform-origin: 50% 0;

   transform: translate(-77px,60px) rotate(13deg);

   position: absolute;z-index: 0;

   animation:erduo .5s ease alternate infinite;}

   .erduo.youerduo{

   width: 32px;

   height: 140px;

   background: blue;

   border-radius: 50%;

   left: 50%;

   transform: translate(45px,60px) rotate(-13deg);

   position: absolute;

   z-index: 0;

   animation:youerduo .5s ease alternate infinite;}

    .yanjing{width: 50px;

   height: 50px;

   border-radius: 25px/27px 25px 25px 4px;

   left: 50%;

   top: -15px;

   transform-origin: 50% 0;

   transform: translate(-77px,60px) rotate(13deg);

   position: absolute;

   z-index: 2;

box-shadow: 2px 0px 0px 0px black inset,-3px -1px 5px -1px #ddd;

overflow: hidden;

background-color: #fff;}

    .yanjing.youyanjing{

     transform: scale(-1, 1) translate(-30px,60px) rotate(13deg);z-index: 2;

     box-shadow: 2px 0px 0px 0px black inset;}

    .yinying{width:60px;

     height: 60px; 

background-color: blue;

position: absolute;

z-index: 1;

left: 63%;

top:38px;

border-radius: 50px/70px 52px 4px 20px;  

transform: rotate(-13deg);}

.yanqiu{width: 50px;

height: 50px;

position: absolute;

border-radius: 50%;

background-color: #e79101;

top: 7px;

left: 6px;

box-shadow: 0px 0px 5px 0px #000 inset;

animation:yanqiu .5s ease alternate infinite;}

.yanqiu::before{

content: '';

width: 35px;

height: 35px;

position: absolute;

border-radius: 50%;

background-color: #000;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);}

.yanqiu::after{

content: '';

width: 10px;

height: 10px;

position: absolute;

border-radius: 50%;

background-color: #fff;

top: 9px;

left: 10px;}

.bizi{width: 100px;

height: 50px; 

background-color: #363035;

z-index:3;

border-radius: 50px/25px 25px 30px 30px;

position: absolute;

top: 92px;

left: 48px;}

.bizi::before{

content: '';

width: 84px;

height: 14px; 

background:linear-gradient(30deg, #fff 0%, #fff 8%, #b1aeb1 15%, #b1aeb1 50%, #544d53 100%);

border-radius: 30px / 10px 10px 2px 2px;

position: absolute;

top: 0px;

left: 7px;}

.bikong{width:30px;

height: 8px;

position: absolute;

left:15%;

top: 25px;

transform-origin: 50% 0;

transform: rotate(35deg);

background:linear-gradient(black 0%,#363035 100%);

border-radius:50%;

animation:bikong .5s ease alternate infinite;}

.youbikong{transform: scale(-1,1) translate(-42px) rotate(35deg);}

.zuiba{width:100px;

height: 50px;

position: absolute;

    bottom: -55px;

    right: 52px;

background: red;

z-index:1;

border-radius: 50px/0px 0px 44px 44px;

box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.5) inset;

animation:zuiba .5s ease alternate infinite;}

.zuiba::before{

content:'';

width: 100px;

height: 25px;

z-index: 1;

background-color: #fff;

border-radius: 50px/0px 0px 20px 20px;

position: absolute;

}

.yachi{width: 20px;height: 8px;

position: absolute;

background: #fff;

left: 50%;

top: 20px;

z-index: 1;

transform-origin: 50% 0;

transform: translate(-20px);

border-radius: 10px/0px 0px 0px 4px;}

.youyachi{transform: scale(-1,1) translate(1px);

border-right: .5px solid #ddd;}

.shetou{width: 50px;

height: 60px;

background: #a2504f;

border-radius: 25px/0px 0px 30px 30px;

z-index: 0;

box-shadow: 0 0 4px 0 #000 inset;

left: 50%;

transform: translate(50%);

animation:shetou .5s ease alternate infinite;}

.body{width: 200px;

height: 200px;

border-radius: 50%;

background-color: #fff;

position: absolute;

left: 50%;

transform: translate(-50%);

top: 170px;}

.shoubi{width: 50px;

height: 100px;

position: absolute;

top: 48px;

left:-22px;

transform-origin: 50% 0;

background-color: #fff;

border-radius: 50%;

transform: rotate(10deg);}

.shoubi::before{content: '';

width: 1px;

height: 60px;

border-radius: 5px/10px 0px 0px 10px;

box-shadow: 0 0 1px 0 #bbb;

transform: rotate(-7deg);

position: absolute;

top: 2px;

left: 36px;}

.youshoubi{transform: scale(-1,1) translate(-190px) rotate(10deg);}

.tui{width: 50px;

height: 100px;

position: absolute;

top: 158px;

left:35px;

z-index: 1;

background:linear-gradient(-90deg, #ddd 0%,#fff 15%, #fff 100% );

border-radius: 50px/0 0 45px 45px;}

.youtui{transform: scale(-1,1) translate(-70px);}

.jiao{width: 70px;

height: 50px;

position: absolute;

top: 85px;

left:61px;

background:linear-gradient(90deg, #ddd 0%,#fff 15%, #fff 100% );

border-radius: 50px/45px 45px 0px 0px;}

.duzi{width: 150px;

height:100px;

border-radius: 50%;

position: absolute;

background:linear-gradient(0deg, #ddd 0%,#fff 15%, #fff 100% );

top:100px;

left: 25px;

z-index: 2;}

@keyframes erduo {

0%{transform: translate(-77px,60px) rotate(13deg);}

100%{transform: translate(-77px,60px) rotate(27deg);}

}

@keyframes youerduo {

0%{transform: translate(45px,60px) rotate(-13deg);}

100%{transform: translate(45px,60px) rotate(-27deg);}

}

@keyframes yanqiu {

0%{transform: translate(0px);}

100%{transform:translate(3px);}

}

@keyframes bikong {

0%{height:8px;}

100%{height:10px;}

}

@keyframes shetou {

0%{height:60px;}

100%{height:10px;}

}

@keyframes zuiba {

0%{height:60px;}

100%{height:40px;}

}

</style>

</head>

<body>

<div class="dog">

<div class="etou"></div>

<div class="lianjia"></div>

<div class="xiaba"></div>

<div class="erduo"></div>

<div class="erduo youerduo"></div>

<div class="yinying"></div>

<div class="yanjing"><div class="yanqiu"></div></div>

<div class="yanjing youyanjing"><div class="yanqiu"></div></div>

<div class="bizi"><div class="bikong"></div><div class="bikong youbikong"></div></div>

<div class="zuiba">

<div class="yachi"></div>

<div class="yachi youyachi"></div>

<div class="shetou"></div>

</div>

</div>

<div class="body">

<div class="shoubi"></div>

<div class="shoubi youshoubi"></div>

<div class="tui"><div class="jiao"></div></div>

<div class="tui youtui"><div class="jiao"></div></div>

<div class="duzi"></div>

</div>

</body>

</html>
ZZZZZzn 2020-04-07
源自：项目：CSS3实现汉克狗案例   2-12 汉克狗最终动画效果
5
收起

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

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

2回答
好帮手慕星星 2020-04-07 19:30:03

同学你好，是嘴巴定位的问题，上下定位用的是bottom，也就是固定在底部的，当高度发生变化的时候，就是上面在动。可以修改为top值，如下

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

动画中高度改变上可以再调整美观一些，祝学习愉快！

1
收起回答
好帮手慕星星 2020-04-07 19:05:04

同学你好，舌头的位置不变，只是高度发生变化，动画中设置高度由大变小，所以看起来舌头就是从下到上的动画。高度换一下位置就好，如下

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

自己再测试下，祝学习愉快！

0
收起回答
  • 提问者 ZZZZZzn #1
    老师，舌头这里没问题，是嘴巴，嘴巴应该是下面动呀，我这个是上面
    2020-04-07 19:12:49
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，我这里为什么嘴巴总是在鼻子上面啊？
5 0 1
舌头不能定位在嘴巴上层伪元素与嘴巴之中
13 0 2
嘴巴舌头问题
4 1 1
老师，我的狗身体的z-index已经是零了，为什么还会挡住舌头嘴巴，不懂怎么调了
5 0 1
为什么我在插记录的时候出现了错误
1 0 18

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

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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