使用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;

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