使用H5实现机器人脸

效果图：

在鼻子    眼睛 嘴巴上 单击的时候，有特殊效果，鼻子效果如下：

页面静态代码如下：

<section id="men">
      <section id="leftEar"></section>
      <section id="face">
        <section id="left"></section>
        <section id="right"></section>
        <section id="nose"></section>
        <section id="mouse"></section>
      </section>
      <section id="rightEar"></section>
    </section>

样式修饰如下：

#men{overflow:auto;position:relative;width:500px;
      background: #CCCCCC;margin: 0 auto;}
      #face{width: 400px;height: 400px;z-index: 5;
      background:yellow;margin: 0px auto;float: left;
      position: relative;/*父容器：相对定位*/
      border:2px solid;left:50px;
      border-color: #f00 #0f0 #00f #000;
      border-radius: 200px 200px;
      }
      #left,#right,#nose,#mouse{width: 50px;height: 50px;/*子容器：绝对定位*/
      background-color: #f00;position: absolute;
      left: 100px;top:50px}
      #left{border-radius: 25px;}
      #right{left: 250px;top: 50px;border-radius: 25px;}
      #nose{left:175px;top:175px;}
      #mouse{width: 100px;left: 150px;top: 300px;
      border-radius: 0px 0px 50px 50px;}
      #left:hover{background-color: #000000;}
      #right:hover{background: url(img/timg.gif)no-repeat -10px 20px;background-size: cover;
      }
      #nose:hover{background:url(img/nose.jpg)no-repeat;
      background-size: cover;
      /*当放上去的时候，换下图片*/
      }
      #mouse:hover{border-radius: 50px 50px 0px 0px;}
      #leftEar,#rightEar{width: 50px;height: 50px;background-color: darkorange;
      position: absolute;left: 0px;top:175px;position: absolute;
      border-radius: 50px 0px 0px 5px;z-index: 2;float: left;
      }
      #rightEar{left:450px;top:175px;
      border-radius: 0px 50px 0px 0px;}

那我们要实现机器人脸部的来回移动如何办呢？

则需要学习这样一个知识点：

标签定义及使用说明

使用@keyframes规则，你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

0％是开头动画，100％是当动画完成。

为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

​注意:​ 使用animation属性来控制动画的外观，还使用选择器绑定动画。.

---

语法

@keyframes  ​animationname ​{

​keyframes-selector ​{

​css-styles;}​}

值	说明
​animationname​	必需的。定义animation的名称。
​keyframes-selector​	必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) ​注意：​ 您可以用一个动画keyframes-selectors。
​css-styles​	必需的。一个或多个合法的CSS样式属性

增加代码如下：

@keyframes move{
        0% {top:0;left:0;background: CCCCCC;}
        25% {top:0;left:500px;background: green;}
        50% {top:500px;left:500px;background: blue;}
        75% {top:500px;left:0;background: CCCCCC;}
        100% {top:0;left:0;background: CCCCCC;}
      }

在#men下增加：

/*动画效果*/
      animation:move 10s infinite;

到现在为止，就实现了，可以移动位置的机器人哦。!!!