css3控制多個背景圖片移動形成動畫效果程式碼例項
本章節分享一段程式碼例項,它實現了通過css3的@keyframes實現了控制元素的多個背景圖片的移動,於是實現動畫效果,關於@keyframes可以參閱CSS3的@keyframes用法詳解一章節。程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> @keyframes animatedBird { from { background-position: 20px 20px, 30px 80px, 0 0; } to { background-position: 300px -90px, 30px 20px, 100% 0; } } @-webkit-keyframes animatedBird { from { background-position: 20px 20px, 30px 80px, 0 0; } to { background-position: 300px -90px, 30px 20px, 100% 0; } } @-ms-keyframes animatedBird { from { background-position: 20px 20px, 30px 80px, 0 0; } to { background-position: 300px -90px, 30px 20px, 100% 0; } } @-moz-keyframes animatedBird { from { background-position: 20px -90px, 30px 80px, 0 0; } to { background-position: 300px -90px, 30px 20px, 100% 0; } } .animate-area2{ width: 560px; height: 190px; background-image:url(img/twitter-logo-bird.png),url(img/treehouseFrog.png),url(img/bg-clouds.png); background-position: 20px -90px, 30px 80px, 0px 0px; background-repeat: no-repeat, no-repeat, repeat-x; animation: animatedBird 4s linear infinite; -ms-animation: animatedBird 4s linear infinite; -moz-animation: animatedBird 4s linear infinite; -webkit-animation: animatedBird 4s linear infinite; overflow: hidden; } </style> </head> <body> <div class="animate-area2"></div> </body> </html>
完整程式碼下載如下:
相關文章
- css3晃動效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- CSS3圖片上下動畫浮動效果CSSS3動畫
- css3水滴效果程式碼例項CSSS3
- CSS3發光背景程式碼例項CSSS3
- CSS3 設定多個背景圖片CSSS3
- css背景虛化效果程式碼例項CSS
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- 美化滾動條效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- CSS3圖層陰影程式碼例項CSSS3
- css3動畫效果抖動解決CSSS3動畫
- CSS3滾動條效果程式碼CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- JS動畫效果——多物體動畫JS動畫
- 直播app系統原始碼,圖片Loading旋轉動畫效果APP原始碼動畫
- UI設計師福利之CSS3實現的任意圖片lowpoly動畫效果UICSSS3動畫
- CSS hover改變背景圖片過渡動畫生硬CSS動畫
- CSS3 loadding載入動畫效果CSSS3動畫
- CSS3載入等待動畫效果CSSS3動畫
- css3動畫完成打字機效果CSSS3動畫
- CSS 例項之滾動的圖片欄CSS
- CSS3文字動態填充背景效果CSSS3
- CSS3實現多種背景效果CSSS3
- 直播系統程式碼,點選產生動畫效果並移動的特效動畫特效
- CSS條紋背景程式碼例項CSS
- Flutter動畫例項——4缸發動機動畫Flutter動畫
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- 如何使用css3實現一個div設定多張背景圖片?CSSS3