視頻課：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% 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;到現在為止，就實現了，可以移動位置的機器人哦。!!!

總結

以上是生活随笔為你收集整理的使用H5实现机器人脸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。