使用H5实现机器人脸

视频课：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 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;}
     
    
   

    

     

    
    

     

      			}
     
    
  
 

  

   

    

     

    
    

     

      /*动画效果*/
     
    
   

    

     

    
    

     
			animation:move 10s infinite;
     
    
  
 

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/78362977