學生制作簡單網頁時如何不使用JavaScript實現圖片輪播效果呢？這里STU網頁教大家僅使用CSS通過CSS3 animation 屬性和 @keyframes 規則來實現圖片輪播切換效果，代碼非常簡單，首先我們來看下實際效果。
首先思路如下準備相同大小的多個圖片，然后將要展示圖片橫排放在一個圖片容器里面，在圖片容器外再加一個展示容器，展示容器大小為圖片大小。給圖片容器添加自定義動畫，在動畫不同階段設置遞增的偏移值。
其次動畫效果分為切換和停留兩部分，自定義動畫階段與圖片數量相關，動畫各階段偏移值與圖片大小相關。
HTML代碼部分：
<div id="container">
<div id="banner">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/2.jpg" />
</div>
</div>
|
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; /* 圖片寬度*2 */
}
}
|
以上示例只有三個圖片，所以添加了三個動畫階段，每一階段都是通過設置遞增的 margin-left 值達到切換的，效果設置的動畫階段（如：35%~60%）是動畫停留部分，和上一階段空余時間（如25%~35%）即為動畫切換部分，各部分時間長短需要自己把控。
網頁定做咨詢 
