用CSS3制作一个动画效果

**

目标：用CSS3制作一个动画效果

**

实现效果：

设计思路
层次：

具体分析：
耳朵部分：
初始部分
把耳朵部分大概定下来，css设置其形状，用transition改变角度；两只耳朵左浮动实现并列（父元素.erduo设置overflowq处理溢出问题）
动画部分：
写自定义动画@keyframes myear{}
from{A状态}to{B状态}；transition改变耳朵的旋转角度；
头部部分：
初始部分

1. 把头部大概定下来，css设定形状，同理设置脸型等；
2. 大概定下眼睛部分，用浮动把两只眼睛DIV浮起来
3. 眼睛里面是眼球容器，眼球里面是光影
4. 鼻子设置形状，颜色，大小，用margin，padding 调整位置
5. 嘴巴设置位置，绝对定位（以其父元素，.toutou来定位）
   动画部分：
6. 自定义动画@keyframes myeyes{} 眼睛移动位置，改变position
7. 自定义动画@keyframes mymouth{} 嘴巴逐渐张大，最后缩小；
   身体（肚子）部分：
   初始部分:
8. 绝对定位定在头下，与头部部分重合，设置z-index属性，来进行优先显示情况；（身体容器<头部容器）；调整身体的初始角度，形状。
9. 身体内部做一个浅色的肚子，脖子下有一个蝴蝶结；
10. 肚子DIV采用margin进行位置的调整；蝴蝶结div里面有三个div，分别是左中右的蝴蝶结细节实现；
    动画部分：
    自定义动画@keyframes mybody{}身体由于走路而晃动，transition改变角度；
    脚脚部分：
    初始部分
11. 脚部先大概position定下位置，z-index属性小于身体容器；
12. 两只脚同上浮动达到同层，设置脚的形状，旋转的角度。
13. 脚里面有鞋子div，黑色；
    动画部分：
    自定义动画：自定义动画@keyframes myfoot{}脚脚走路，transition改变角度实现；

源代码：`html源码

    <div class="erduo">
        <div class="zuoer">
            <div class="innerear1"></div>
        </div>
        <div class="youer">
            <div class="innerear2"></div>
        </div>
    </div>
    
    <div class="tou">
        <div class="toutou">
            <div class="yanjing">
                <div class="zuoyan">
                    <div class="yanqiu">