資料來源：http://blog.shihshih.com/pure-css-slider/
Step 1:先將圖片就定位
HTML Markup
<divdiv class="slider_container">
<divdiv>
<divimg src="images/image1.png" alt="pure css3 slider" />
<divspan class="info">Image Description
<div/div>
<divdiv>
<divimg src="images/image2.png" alt="pure css3 slider" />
<divspan class="info">Image Description
<div/div>
<divdiv>
<divimg src="images/image3.png" alt="pure css3 slider" />
<divspan class="info">Image Description
<div/div>
<divdiv>
<divimg src="images/image4.png" alt="pure css3 slider" />
<divspan class="info">Image Description
<div/div>
<divdiv>
<divimg src="images/image5.png" alt="pure css3 slider" />
<divspan class="info">Image Description
<div/div>
<div/div>
CSS Style
.slider_container {
margin: 30px auto;
width: 400px;
height: 280px;
position: relative;
border: 20px solid;
border-color: #fff;
border-bottom-width: 100px;
background-color: #f5f5f5;
box-shadow: #666 0 0 5px;
}
.slider_container div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
Step 2:確認輪播效果的時間軸
先決定過場時間(前後兩張圖片重疊的時間)、每張圖片播放的時間、完成一個週期需要多少時間。
由上圖我們知道我們的輪播器共有5張圖片，過場時間為1秒、每張圖片播放4秒、一個完整的週期是25秒。因為@keyframe的時間是以百分比來表示，因為我們要先把秒換成百分比。
100% / 25秒 = 4% ( 每秒)
4% = 1秒
100% / 25秒 = 4% ( 每秒)
4% = 1秒
CSS3 Keyframes Animation
設定動畫週期。
.slider_container div {
-webkit-animation: round 25s linear infinite;
animation: round 25s linear infinite;
}
@-webkit-keyframes round {
4% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 - 1秒 淡入*/
}
20% {
opacity: 1;
filter: alpha(opacity=100);
/* 1- 5秒靜止*/
}
24% {
opacity: 0;
filter: alpha(opacity=0);
/* 5-6秒淡出*/
}
}
@keyframes round {
4% {
opacity: 1;
filter: alpha(opacity=100);
/* 0 - 1秒 淡入*/
}
20% {
opacity: 1;
filter: alpha(opacity=100);
/* 1- 5秒靜止*/
}
24% {
opacity: 0;
filter: alpha(opacity=0);
/* 5-6秒淡出*/
}
}
每張圖片進場時間相隔5秒
.slider_container div:nth-child(5) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.slider_container div:nth-child(4) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.slider_container div:nth-child(3) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.slider_container div:nth-child(2) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.slider_container div:nth-child(1) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
CSS transition
當滑鼠移到圖片上時、底下出現 “Image Description" 字樣且輪播動畫暫停。當滑鼠離開時、"Image Description" 字樣且輪播動畫繼續播放。
.slider_container span {
color: #000;
background: #fff;
position: absolute;
left: 0%;
top: 280px;
width: 400px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
-webkit-transform:scaleY(0);
-ms-transform:scaleY(0);
transform:scaleY(0);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.slider_container:hover span {
width: 100%;
-webkit-transform:scaleY(1);
-ms-transform:scaleY(1);
transform:scaleY(1);
}
Pause And Restart
當滑鼠移到圖片上時，暫停播放動畫。
當滑鼠移到圖片上時，暫停播放動畫。
.slider_container:hover div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
於文件加入語法 :