最近有個客戶想要做一個熱點圖片，但我對動畫沒有太多的接觸，經過這幾天的研究和上網查找資料，終於作了出序列幀動畫。 圖片地址：圖片下載 代碼如下： 之後我也在網上找了一些案例，我把文件放在這裡，有興趣的朋友可以看看 序列幀動畫下載 第一個是自己寫的案例 ， 第二三個是在網上找別人的但是原網我忘了（日後 ...
最近有個客戶想要做一個熱點圖片，但我對動畫沒有太多的接觸，經過這幾天的研究和上網查找資料，終於作了出序列幀動畫。
圖片地址：圖片下載
代碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>序列幀動畫練習一</title> <!--如果圖片是單行排列 那他的每幀百分比可以不細分--> <style type="text/css"> .girl { background: url('hotspot.png');/*圖片的寬高為128 3200px*/ /* 務必設置box的寬度，這樣其他不在box中就不會顯示*/ background-size: 128px 3200px;/*表示在圖片標簽中顯示的寬高 一般是序列幀圖片的寬高或者他的倍數 3200px / 128px == 25 */ -webkit-animation: demo 2s steps(25) infinite; /*steps（25）表示設置25步完成動畫*/ width: 128px; height: 128px; } @-webkit-keyframes demo { 0% { background-position: 0 0; } 100% { background-position: 0px -3200px; } /*設置背景圖的位置從0 到-3200px -表示圖片向上移*/ } </style> </head> <body bgcolor="gray"> <div class="girl" style="top: 38%;left: 36%;position: absolute;"> </body> </html>
之後我也在網上找了一些案例，我把文件放在這裡，有興趣的朋友可以看看
第一個是自己寫的案例 ， 第二三個是在網上找別人的但是原網我忘了（日後找到了我會將原網地址放上）。
（ps: 這是我的第一篇博文，還不太會操作）17:24:12
