css Sprite 動畫效果程式碼例項
分享一段程式碼例項,利用css sprite技術模擬實現動畫效果。
所謂css Sprite技術其實就是背景圖片精切定位。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div { animation: 5s steps(23) 0s normal none infinite running ape_amb; background-image: url("demo/CSS/img/sprite-animal-ape.png"); background-position: -1821px center; height: 217px; margin-left: 210px; width: 169px; overflow: hidden; } @keyframes ape_amb { 0% { background-position: 0px center; } 100% { background-position: -5113px center; /**最後一張圖片的位置**/ } } </style> </head> <body> <div></div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).animation可以參閱CSS3 animation一章節。
(2).background-position可以參閱CSS background-position一章節。
相關文章
- jQuery 動畫效果程式碼例項jQuery動畫
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- CSS橢圓效果程式碼例項CSS
- css立體效果程式碼例項CSS
- css斜線效果程式碼例項CSS
- css 心形效果程式碼例項CSS
- css3 animation動畫程式碼例項CSSS3動畫
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- jQuery background-position動畫效果程式碼例項jQuery動畫
- css背景虛化效果程式碼例項CSS
- CSS文字模糊效果程式碼例項CSS
- css內邊框效果程式碼例項CSS
- css文章豎排效果程式碼例項CSS
- css六邊形效果程式碼例項CSS
- css3星空效果程式碼例項CSSS3
- css紙飛機效果程式碼例項CSS
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- css實現矩形切角效果程式碼例項CSS
- div css搜尋框效果程式碼例項CSS
- css多元素水平居中效果程式碼例項CSS
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- div css三列布局效果例項程式碼CSS
- JavaScript 動畫效果例項JavaScript動畫
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- css3控制多個背景圖片移動形成動畫效果程式碼例項CSSS3動畫
- CSS3滑過光束效果程式碼例項CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- css3立方體效果程式碼例項CSSS3