CSS3 圖片由遠及近自動放大效果程式碼例項
分享一段程式碼例項,它實現了圖片放大效果,具有一定的動畫效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> @charset "utf-8"; html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 62.5%; } html * { -webkit-tap-highlight-color: rgba(0,0,0,.05); margin: 0; padding: 0; } img { -ms-interpolation-mode: bicubic; width: 100%; } /*首頁banner*/ @keyframes scal { from { -webkit-transform: scale(1,1); } to { -webkit-transform: scale(1.1,1.1); } } @-webkit-keyframes scal { from { -webkit-transform: scale(1,1); } to { -webkit-transform: scale(1.1,1.1); } } #banner { width: 100%; overflow: hidden; float: left; position: relative; } #banner .banner_in { width: 100%; min-height: 480px; transform: scale(1,1); -webkit-transform: scale(1,1); animation: scal 10s ease infinite alternate; -webkit-animation: scal 10s ease infinite alternate; } </style> </head> <body> <div id="banner"> <div class="banner_in" id="banner01"><img src="demo/CSS/img/ali.jpg" /></div> </div> </body> </html>
相關文章
- 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
- CSS3圖層陰影程式碼例項CSSS3
- JavaScript 圖片放大鏡效果JavaScript
- 美化滾動條效果程式碼例項
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- CSS3圖片上下動畫浮動效果CSSS3動畫
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- CSS3卡通形象程式碼例項CSSS3
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- CSS3繪製太極圖程式碼例項詳解CSSS3
- jQuery tab選項卡效果程式碼例項jQuery
- canvas載入效果程式碼例項Canvas
- CSS橢圓效果程式碼例項CSS
- CSS3發光背景程式碼例項CSSS3
- CSS3紙飛機程式碼例項CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3滾動條效果程式碼CSSS3
- canvas原型鐘錶效果程式碼例項Canvas原型
- css背景虛化效果程式碼例項CSS
- canvas氣泡上浮效果程式碼例項Canvas
- jQuery點選滑出層效果程式碼例項jQuery
- div前後翻轉效果程式碼例項
- 當前文字框高亮效果程式碼例項
- 淡入淡出效果簡單程式碼例項
- canvas繪製箭頭效果程式碼例項Canvas
- 教你怎麼使用css3給圖片新增漸變效果(程式碼詳解)CSSS3
- CSS 例項之滾動的圖片欄CSS