视频课：https://edu.csdn.net/course/play/7621
效果图：
在鼻子 眼睛 嘴巴上 单击的时候，有特殊效果，鼻子效果如下：
页面静态代码如下：
<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% 注意： 您可以用一个动画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;
到现在为止，就实现了，可以移动位置的机器人哦。!!!
