老师，小狗右边的耳朵旋转有问题，请帮忙看哈撒

老师，小狗右边的耳朵旋转有问题，请帮忙看哈撒

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>dog</title>
        
        <style type="text/css">
             :root {
                --bg: rgb(249, 249, 246);
                --hl: rgb(27, 47, 144);
                --t: 2s;
                --color1:#ffc400;
              }
            body{background:var(--color1);}
            .dog{
                top:78vh;
                left:-10vw;
                position:relative;
                /* background:red; */
                
            }
             .head {width: 275px; height: 275px; position: relative; margin: 0 auto;border:1px solid burlywood;}
                .forehead{
                    background:var(--bg);width:102px;height:48px;
                    position:absolute;left:50%;
                    transform:translate(-50%,0);
                    border-radius:51px/43px 43px 5px 5px;
                    top:-22px;
                    z-index: 1;
                }
                
                .face{
                    width:110px;height:68px;
                    border-radius:50%;position:absolute;
                    background:var(--bg);left:50%;transform:translate(-50%,0);
                    z-index:1;}
                    
                .chin{
                    width:104px;height:36px;position:absolute;left:50%;transform:translate(-50%,0);
                    top:41px;background:var(--bg);border-radius:50%/0 0 43px 43px;
                    z-index:1;
                    }
                    
                .ear{
                    width:16px;height:72px;position:absolute;left:50%;
                    margin-left:-38px;
                    background:var(--bg);top:14px;border-radius:50%;
                    animation:rotate ease-in-out 2s infinite;
                    
                }
                .ear.right{
                    transform:scale(-1,1);margin-left:22px;background:var(--bg);
                    animation: rotate-right 2s ease-in-out infinite;
                }
                
                /*耳朵 添加animation动画，为什么右边耳朵是旋转的？ */
                     @keyframes rotate {
                      0% {
                        transform: rotate(0deg)
                      }
                      5% {
                        transform: rotate(0deg)
                      }
                      55% {
                        transform: rotate(30deg)
                      }
                      100% {
                        transform: rotate(0deg)
                      }
                     }
                    
                     @keyframes rotate-right{
                       0% {
                         transform: rotate(0deeg)
                       }
                        5% {
                        transform:rotate(0deg)
                    }
                        55% {
                        transform:rotate(-30deg)
                    }
                        100% {
                        transform:rotate(0deg)
                    }
                }
                
                .eye{
                    position:absolute;background:var(--bg);width:24px;height:24px;
                    border-radius:50%/20px 12px 12px 4px;
                    left:50%;
                    z-index:2;
                    transform:translate(-43.5px,0);
                    box-shadow:2px 0 0 -1px #000 inset;
                    overflow:hidden;
                    
                }
                .eye.right{
                    transform:scale(-1,1) translate(-21.5px,0);
                    box-shadow:2px 0 0 -1px #000 inset;
                }
            
                
                
                .pupil{
                    width:26px;height:26px;background:#e79101;
                    position:absolute;
                    left:3px;top:3px;
                    border-radius:50%;
                    box-shadow:0 0 6px 0 #000 inset;
                    animation: eyeleft 2s ease-in-out infinite;
                    
                }
                .pupil:before{
                    content:"";
                    width:18px;height:18px;
                    background:#000;
                    position:absolute;
                    border-radius:50%;
                    left:50%;top:50%;
                    transform:translate(-50%,-50%);
                }
                
                .pupil:after{
                    content:"";
                    position:absolute;
                    width:6px;height:6px;
                    background:#fff;
                    border-radius:50%;
                    left:30%;
                    top:30%;
                    transform:translate(-50%,-50%);
                }
                    /* 眼睛添加动画 */
                @keyframes eyeleft {
                    0% {transform:translate(0px)}
                    5% {transform:translate(0px)}
                    50%{transform:translate(-3px)}
                    100%{transform:translate(0px)}
                }
                
                .birthmark{
                    position:absolute;
                    left:50%;
                    top:-9px;
                    width:30px;height:36px;
                    background: var(--hl);
                    transform: rotate(-10deg) translate(16.5px, 0);
                    z-index: 1;
                    border-radius:50%/18px 34px 2px 18px;
                }
                
                    .nose{
                        position:absolute;
                        width:62px;
                        height:38px;
                        border-radius:50% / 35% 35% 65% 65%;
                        background:#363035;
                        top:17px;
                        left:50%;
                        transform:translate(-50%,0px);
                        z-index:2;
                    }
                    
                    .nose:before{
                        content:"";
                        width:98%;
                        height:40%;
                        background:linear-gradient(30deg,#fff 0%,#aaa 20%,#363035 100%);
                        border-radius:50% / 90% 90% 10% 10%;
                        position:absolute;
                        opacity:0.8;
                        
                    }
                    /* 鼻孔动画效果 */
                    
                    .nostril{
                        position:absolute;
                        background:linear-gradient(0deg,#363035 0%,#000 100%) ;
                        top:22px;
                        left:50%;
                        width:15px;
                        height:4px;
                        z-index:0;
                        transform:translate(-20px,0px) rotate(28deg);
                        border-radius:50%;
                        animation: sizea 2s ease-in-out infinite;
                    }
                    @keyframes sizea{
                        0% {height:4px }
                        20%{height:4px}
                        50%{height:4px}
                        70%{height:3px}
                        100%{height:4px}
                    }
                    /* z-index:层级理解错误 */
               
                    /* 用scale(-1,1)反转后不需要position定位,而且反转后的当前位置是在参考对象移除ransform属性后的位置，位置重合，但是反转了一下 */
                    .nostril.right{
                        transform:scale(-1,1) translate(-6px,0) rotate(28deg);
                    }
                    
                    .mouth{
                        position:absolute;
                        width:68px;
                        height:27px;
                        border-radius:50%/0 0 100% 100%;
                        background:#671316;
                        left:50%;
                        top:45px;
                        transform:translate(-50%,0);
                        z-index:1;
                        box-shadow:0 0 6px 0 #000 inset;
                    }
                     .mouth:before{
                        content:"";
                        width:100%;
                        height:50%;
                        background:#FFFFFF;
                        z-index:3;
                        position:absolute;
                        border-radius:50%/0 0 50% 50%;
                        left: 50%;
                        transform: translate(-50%, 0);/* 感觉有些多余 */
                    }
                    
                    .teen{
                     border-radius: 0 0 1px 2px;
                     transform: translate(-50%, 0);
                      width: 10px; height: 3px;
                     background: var(--bg);
                     position: absolute;
                      top: 12px; left: 43%;
                      z-index: 2
                    }
                    
                    .teen.no21{
                        transform:scale(-1,1) translate(-50%,0)
                    }
                    
                    .tongue{
                        position:absolute;
                        z-index: 2;
                        width:34px;
                        height:24px;
                        left:50%;
                        transform:translate(-50%,0);
                        background:#a2504f;
                        border-radius:50%/0 0 50% 50%;
                        z-index:1;
                        box-shadow:0 0 6px 0 rgba(0,0,0,0.5) inset;
                    }
                    
                    .body{
                        position:absolute;
                        width:66px;
                        height:70px;
                        border-radius:50%;
                        top:74px;
                        background:#FFFFFF;
                        z-index:2;
                        margin:0 auto;
                        left:50%;
                        transform:translate(-50%,0)
                    }
                    
            /*         .arm {
                        width: 26px; height: 40px;
                        position: absolute; left: 50%;
                        transform: translate(-40px, 0) rotate(22deg);
                        background: var(--bg);
                        border-radius: 50% / 25px 0 0 15px; top: 3px;
                        z-index:0;
                      }
                    .arm.right {
                        transform: scale(-1, 1) translate(-14px, 0) rotate(22deg);
                        } */
                        
                    .arm {width: 26px; height: 40px; position: absolute; left: 50%; transform: translate(-40px, 0) rotate(22deg); background: var(--bg); border-radius: 50% / 25px 0 0 15px; top: 3px;}
                    .arm.right {transform: scale(-1, 1) translate(-14px, 0) rotate(22deg);}
                    .arm:before {content: ''; width: 6px; height: 28px; box-shadow: -1px 0 0 0px #ddd; position: absolute; right: 8px; top: 8px; border-radius: 6px / 8px 0 0 20px}
                    .leg {width: 29px; height: 50px; position: absolute; left: 50%; transform: translate(-33px, 0); background: linear-gradient(-80deg, #000 0%, var(--bg) 17%, var(--bg) 100%); border-radius: 50% / 0px 25px 25px 50px; top: 37px;}
                    .leg.right {transform: scale(-1, 1) translate(-3px, 0)}
                    .foot {width: 29px; height: 15px; position: absolute; left: 50%; transform: translate(-50%, 0); background: linear-gradient(-107deg, #000 0%, var(--bg) 17%, var(--bg) 100%); border-radius: 50% / 10px 10px 5px 5px; bottom: 0px;}
                    .belly {width: 60px; height: 36px; position: absolute; left: 50%; transform: translate(-50%, 0); background: linear-gradient(0deg, #999 0%, var(--bg) 14%, var(--bg) 100%); border-radius: 50% / 0 0 36px 36px; bottom: 0px;}
                        
                
                    
                        
                    /* .arm {
                        width: 26px; height: 40px;
                        position: absolute; left: 50%;
                        transform: translate(-40px, 0) rotate(22deg);
                        background: var(--bg);
                        border-radius: 50% / 25px 0 0 15px; top: 3px;
                      }
                    .arm.right {
                        transform: scale(-1, 1) translate(-14px, 0) rotate(22deg);
                        }
                     */
                    
                    /* .body {
                        width: 66px; height: 70px;
                    position: absolute; left: 50%;
                    transform: translate(-50%, 0);
                    background: var(--bg); border-radius: 50%;
                     top: 74px;
                     } */
            
                    
                    
                    
                    
                    /* .tongue {animation: extend var(--t) ease-out infinite;
                     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
                      width: 34px; height: 18px;
                      border-radius: 50% / 0 0 50% 50%;
                      transform: translate(-50%, 0); position: absolute;
                       left: 50%; z-index: 1; background: #a2504f} */
                    
                    
                    /* .teen {animation: follow var(--t) ease-out infinite;
                     border-radius: 0 0 1px 2px; transform: translate(-50%, 0); width: 10px; height: 3px;
                      background: var(--bg); position: absolute;
                       top: 12px; left: 43%; z-index: 2
                       }
                       */
                /*     .teen.no21 {
                        transform: scale(-1, 1) translate(-50%, 0)
                        } */
                    
                    
                        /* .mouth {
                            animation: close var(--t) ease-out infinite;
                         box-shadow: 0 0 6px 0 #000 inset; left: 50%;
                         transform: translate(-50%, 0); width: 68px; height: 27px; position: absolute;
                          background: #671316; z-index: 1; border-radius: 50% / 0 0 100% 100%; top: 45px}
                          
                        .mouth:before {
                            content: ''; z-index: 3; width: 100%; height: 50%; left: 50%;
                         transform: translate(-50%, 0); position: absolute; background: var(--bg);
                          border-radius: 50% / 0 0 70% 70%} */
                    
                /*     .mouth {
                        animation: close var(--t) ease-out infinite;
                     box-shadow: 0 0 6px 0 #000 inset; left: 50%;
                     transform: translate(-50%, 0); width: 68px; height: 27px; position: absolute;
                      background: #671316; z-index: 1; border-radius: 50% / 0 0 100% 100%; top: 45px}
                      
                    .mouth:before {
                        content: ''; z-index: 3; width: 100%; height: 50%; left: 50%;
                     transform: translate(-50%, 0); position: absolute; background: var(--bg);
                      border-radius: 50% / 0 0 70% 70%}
                     */
                
                
                /* .nostril {
                            animation: resize var(--t) ease-out infinite;
                            position: absolute; left: 50%; transform: translate(-20px, 0) rotate(28deg);
                            top: 22px; z-index: 0; background: linear-gradient(0deg, #363035 0%, #000 100%);
                            width: 15px; height: 4px; border-radius: 50%;
                    }
                .nostril.right {
                            transform: scale(-1, 1) translate(-6px, 0) rotate(28deg)
                            } */
                
            /*     .nose {
                        left: 50%; transform: translate(-50%, 0);
                        width: 62px; height: 38px; position: absolute;
                        background: #363035; z-index: 2;
                        border-radius: 50% / 35% 35% 65% 65%; top: 17px
                        }
                        
                .nose:before {
                            content: ''; width: 98%; height: 40%; left: 50%;
                            transform: translate(-50%, 0); position: absolute;
                            background: linear-gradient(30deg, #fff 0%, #fff 5%, #aaa 20%, #363035 100%);
                            border-radius: 50% / 90% 90% 10% 10%; opacity: 0.8
                     }
                 */
                
                
                /* .birthmark {
                    left: 50%; transform: rotate(-10deg) translate(16.5px, 0);
                    width: 30px; height: 36px; position: absolute;
                    background: var(--hl); z-index: 2;
                    border-radius: 50% / 18px 34px 2px 18px;
                    top: -9px;
                
                    } */
            
                
                
                
                
                
                /* .pupil {
                    animation: tranlate var(--t) ease-out infinite;
                    box-shadow: 0 0 6px 0 #000 inset;
                     width: 26px;height: 26px;
                     border-radius: 50%;
                     background: #e79101; position: absolute; left: 3px; top: 3px}
                    
                .pupil:before {
                    border-radius: 50%; content: ''; width: 18px; height: 18px;
                    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) ;
                     background: #000}
                
                .pupil:after {
                    border-radius: 50%; content: ''; width: 6px; height: 6px;
                     position: absolute; left: 27%; top: 30%; transform: translate(-50%, -50%);
                     background: #fff} */
                    
                
                
                /* .eye.right {box-shadow: 2px 0px 0px -1px #000 inset;
                 transform: scale(-1, 1) translate(-21.5px, 0);} */
            
                /* .eye {overflow: hidden; box-shadow: 2px 0px 0px -1px #000 inset, -1px -1px 7px 1px #bbb;
                left: 50%; transform: translate(-43.5px, 0); width: 24px; height: 24px;
                 position: absolute; background: var(--bg); z-index: 2; border-radius: 50% / 20px 12px 12px 4px; top: -2px;} */
            
                /* .ear.right {animation: rotate-right var(--t) ease-out infinite; transform: scale(-1, 1); margin-left: 22px;} */
            
                
                /* .ear {animation: rotate var(--t) ease-out infinite; position: absolute; left: 50%; margin-left: -38px;
                 top: 14px; z-index: 0; background-color: var(--hl); width: 16px; height: 70px; border-radius: 50%;} */
            
                
                /* .chin {left: 50%; transform: translate(-50%, 0); width: 104px; height: 36px; position: absolute;
                 background: var(--bg); z-index: 1; border-radius: 50% / 0 0 36px 36px; top: 41px;} */
            
            
            /*  .face {left: 50%; transform: translate(-50%, 0); width: 110px; height: 68px;
               position: absolute; background: var(--bg); z-index: 1; border-radius: 40% / 50%;} */
            
            
            
              /* .forehead {left: 50%; transform: translate(-50%, 0); top: -22px;
              border-radius: 51px / 43px 43px 5px 5px; width: 102px;
               height: 48px; background: var(--bg); position: absolute; z-index: 1} */
        </style>
    </head>
    <body>
        <div class="dog">
          <div class="head">
            <div class="forehead"></div>
            <div class="face"></div>
            <div class="chin"></div>
            <div class="eye">
              <div class="pupil"></div>
            </div>
            <div class="eye right">
              <div class="pupil"></div>
            </div>  
            <div class="birthmark"></div>
            <div class="ear"></div>
            <div class="ear right"></div>
            <div class="nose">
              <div class="nostril"></div>
              <div class="nostril right"></div>
            </div>
            <div class="mouth">
              <div class="teen no11"></div>
              <div class="teen no21"></div>
              <div class="tongue"></div>
            </div>
        </div>
        <div class="body">
          <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>
慕盖茨6251851 2019-08-25
源自：项目：CSS3实现汉克狗案例   2-13 编程练习
0
收起

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

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

1回答
好帮手慕慕子 2019-08-25 14:14:19

同学你好， 因为动画帧的开始状态设置角度deg单词拼写错误，导致右侧的耳朵动画有问题， 建议修改：

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

同学在编写代码过程中要细心一点哦

如果帮助到了你， 欢迎采纳！

祝学习愉快~~

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

关于右耳朵
6 0 1
鼠标经过，不会旋转
17 0 3
老师好，这段代码按照视频中去敲的 为何右耳那里没法和左耳对称
3 0 1
有两个问题请教一下
26 0 3
0:56为什么说：：before和：：after不好进行整体的旋转？
33 0 3

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

在线咨询

领取优惠

免费试听

领取大纲

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