CSS實現輪播效果
阿新 • • 發佈：2017-09-25
ini html out mes 實現 discover body opacity屬性 blog
還沒有學習如何用JS實現輪播圖效果，所以就用CSS做了一個假的~
氮素！目前只調出三個圖實現輪播，圖越多代碼就越復雜，後面就沒調了，才不是因為我懶_(:з」∠)_
代碼如下↓↓↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
img[alt="02"]{
position: absolute;
animation: op_02 20s ease-in-out infinite;
}
img[alt="01"]{
position: absolute;
animation: op_01 10s ease-in-out infinite;
}
@keyframes op_01{
30%{
opacity: 1;
}
70%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes op_02{
0%{
opacity: 1;
}
30%{
opacity: 0;
}
}
</style>
<body>
<img src="app_discover_4_05_033_03.png" alt="01">
<img src="app_discover_4_07.png" alt="02">
<img src="app_discover_4_12.png" alt="03">
</body>
</html>
關鍵點就在於利用opacity屬性控制圖片在何時變為透明又何時出現，原理很簡單吧~ CSS3真的超級強大了~
CSS實現輪播效果