本篇文章為大家介紹CSS實現圖片輪播效果的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
【推薦教學:CSS影片教學】
理論基礎
CSS3 animation 屬性和@keyframes 規則
主體思想
#準備相同大小的多個圖片
將要展示圖片橫排放在一個圖片容器裡面
在圖片容器外再加一個展示容器,展示容器大小為圖片大小
為圖片容器新增自訂動畫,在動畫不同階段設定遞增的偏移值
# #動畫效果分為切換與停留兩部分
自訂動畫階段與圖片數量相關
#動畫各階段偏移值與圖片大小相關<div id="container"> <div id="photo"> <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> </div> </div>解析: 這裡建立了三個img 元素,img 元素外面是圖片容器,圖片容器外面是展示容器。
CSS
#container { width: 400px; height: 300px; overflow: hidden; } #photo { width: 1200px; animation: switch 5s ease-out infinite; } #photo > img { float: left; width: 400px; height: 300px; } @keyframes switch { 0%, 25% { margin-left: 0; } 35%, 60% { margin-left: -400px; } 70%, 100% { margin-left: -800px; } }解析:####展示容器大小和圖片大小一致######圖片新增float 效果,不用考慮麻煩的margin 問題######由於範例只有三個圖片,所以添加了三個動畫階段,每一階段都是透過設定遞增的margin-left 值達到切換的效果######設定的動畫階段(如:35%~60%)是動畫停留部分,和上一階段空餘時間(如25%~35%)即為動畫切換部分,各部分時間長短需要自己把控###### #######運行效果##################更多程式相關知識,請造訪:###程式設計影片###! ! ###
以上是利用CSS如何實現圖片輪播效果? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!