效果圖:
在鼻子 眼睛 嘴巴上 單擊的時候,有特殊效果,鼻子效果如下:
頁面靜態**如下:
樣式修飾如下:
#men
#face
#left,#right,#nose,#mouse
#left
#right
#nose
#mouse
#left:hover
#right:hover
#nose:hover
#mouse:hover
#leftear,#rightear
#rightear
那我們要實現機械人臉部的來回移動如何辦呢?
則需要學習這樣乙個知識點:
使用@keyframes規則,你可以建立動畫。
建立動畫是通過逐步改變從乙個css樣式設定到另乙個。
在動畫過程中,您可以更改css樣式的設定多次。
指定的變化時發生時使用%,或關鍵字"from"和"to",這是和0%到100%相同。
0%是開頭動畫,100%是當動畫完成。
為了獲得最佳的瀏覽器支援,您應該始終定義為0%和100%的選擇器。
注意:使用animation屬性來控制動畫的外觀,還使用選擇器繫結動畫。.
@keyframes
animationname } 值
說明animationname
必需的。定義animation的名稱。
keyframes-selector
必需的。動畫持續時間的百分比。合法值:
0-100%
from (和0%相同)
to (和100%相同)
注意:您可以用乙個動畫keyframes-selectors。
css-styles
必需的。乙個或多個合法的css樣式屬性
增加**如下:
@keyframes move
25%
50%
75%
100%
}
在#men下增加:
/*動畫效果*/
animation:move 10s infinite;
到現在為止,就實現了,可以移動位置的機械人哦。!!! H5喚醒App如何實現
在這個流量為王的網際網路背景下,移動端的h5頁面顯然在導流上承擔著重要作用,在h5頁面上,我們對引流的需求有兩種 1 url scheme 是scheme的名稱,代表著協議名稱。它包含 authority 和 path。可選專案,隔開或 隔開的鍵值對 可選專案包,其它額外的標識資訊 儘管url sc...
實現h5鏈結開啟Android app
androidmanifest.xml中設定data屬性,data代表資料來源,是中最複雜的標籤,因為不同的activity支援的資料 和型別多種多樣,所以需要通過詳細的data標籤資訊來指明。啟動頁中加入下列 屬性 android name activitys.startactivity andr...
H5使用Manifest離線快取
1.mime type宣告 以apache為例,我們需要在httpd.conf中加上 2.在html檔案中引入manifest檔案 3.manifest檔案語法 cache manifest version 1.0 cache style default.css images sound icon....