HTML5動畫小游戲已經成為了現在網絡游戲中一種比較流行的形式。動畫可以使游戲更加的生動和有趣。在開發HTML5動畫小游戲的時候，需要使用特效代碼來展示出游戲中的一些效果，這些代碼可以使游戲更加的精彩。

/*代碼1：使圖片跳動*/
img:hover {
transform: translateY(-10px);
}

上述代碼可以使圖片在鼠標移動到上面時自動跳動。通過CSS3的transform屬性來改變圖片在頁面中的位置。代碼中的translateY(-10px)表示在Y軸方向上往上移動10個像素。

//代碼2：設置動畫
@keyframes move {
from { left: 0px; }
to { left: 100px; }
}
div {
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}

上述代碼可以讓一個div元素在左右移動。代碼中@keyframes是設置動畫的關鍵字，move是動畫的名稱。通過from和to來定義動畫的開始和結束狀態，left表示在水平方向上的偏移量。div元素使用animation-name屬性來指定動畫名稱，animation-duration屬性來定義動畫時間，animation-iteration-count屬性來定義動畫播放的次數。

//代碼3：設置輪播圖
ul { 
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
li {
float: left;
}
.slider {
width: 600px;
margin: 0 auto;
animation: slide 10s infinite;
}
@keyframes slide {
0% { margin-left: 0; }
10% { margin-left: -600px; }
20% { margin-left: -1200px; }
30% { margin-left: -1800px; }
40% { margin-left: -2400px; }
50% { margin-left: -3000px; }
60% { margin-left: -3600px; }
70% { margin-left: -4200px; }
80% { margin-left: -4800px; }
90% { margin-left: -5400px; }
100% { margin-left: 0; }
}

上述代碼是實現輪播圖的代碼，可以讓圖片自動切換。通過ul元素來實現圖片列表，使用list-style、padding、margin和overflow屬性來定義列表的樣式。動畫通過keyframes關鍵字來定義，一共設置11個動畫狀態，通過margin-left屬性來實現圖片的滾動效果。通過slider類來控制整個輪播圖的寬度和居中。