今天分享使用html+css3+少量實現鼠標移入移出圖片生成隨機動畫鼠標放上去顯示文字，我們先看最終效果圖(截圖為靜態效果，做出來可是動態的喲)
左右旋轉
上下移動
縮放
由于時間關系我就不一步步解析各段代碼所代表含義，我這里就給出一些思路及關鍵代碼：
1、首先使用ul li展現4張圖片
本示例中不僅使用了圖片，在圖片表面還放置了一段“WEB”字樣文字，用于與圖片實現隱藏或顯示效果，故html中每張圖片上方加入：
WEB
2、CSS控制圖片及文字透明度
本示例中一組圖片與文字同時放在一個li里面，高度與寬度設置與li一樣大，并使用絕對定位固定它們的位置：
#myimg ul li a div {: ;top: 0;left: 0;width: 100%;: 100%;text-align: ;font-size: 40px;}
默認將隱藏圖片，只顯示文字，鼠標放入li時顯示圖片，這里使用透明度屬性控制：
#myimg ul li a div.pic {: 0;}#myimg ul li:hover a div.pic {: 1;}
3、CSS3自定義動畫
本示例中用css3定義了3種動畫：
@ rot /*自定義 旋轉動畫*/ { 0% 20% 40% 60% 80% 100% { -: top ; } 0% { : (0deg) } 20% { : (-20deg) } 40% { : (15deg) } 60% { : (-10deg) } 80% { : (5deg) } 100% { : (0deg) } } @ top /*自定義 上下動畫*/ { 0% { top: 0 } 20% { top: 20px } 40% { top: -15px } 60% { top: 10px } 80% { top: -5px } 100% { top: 0px } } @ sca /*自定義 縮放動畫*/ { 0% { : scale(1) } 20% { : scale(1.1) } 40% { : scale(0.9) } 60% { : scale(1.05) } 80% { : scale(0.95) } 100% { : scale(1) } }
使用css執行上述自定義動畫：
#myimg ul li.rot {: rot 1s;}#myimg ul {: top 1s;}#myimg ul li.sca {: sca 1s;}
4、生成隨機動畫
當鼠標移入ul li時，使用隨機產生上述3種自定義動畫鼠標放上去顯示文字，這里使用hover事件
HTML代碼如下：
CSS代碼如下：
代碼如下：
注意事項：需要引入文件，可以自行選擇版本
好了，今天分享就到這里，以后還有更多喲，請大家一起來交流下