純CSS實現簡易輪播（一）
阿新 • • 發佈：2019-01-26
做專案的時候總用別人的輪播外掛，就想著自己能不能做一個輪播，能不能用純CSS做的，然後就在網上查了一下，發現例子還不少，然後看一下別人的，自己照貓畫虎的也來一個試試，很簡單的一個效果，這個的體驗效果不太好，想學習的可以看一下試試
html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/test_5.css"> </head> <body> <div id="carousel"> <ul class="slider"> <li class="items item_1"><img src="../img/img_14.jpg"><h1>1</h1></li> <li class="items item_2"><img src="../img/img_15.jpg"><h1>2</h1></li> <li class="items item_3"><img src="../img/img_16.jpg"><h1>3</h1></li> <li class="items item_4"><img src="../img/img_17.jpg"><h1>4</h1></li> <li class="items item_5"><img src="../img/img_18.jpg"><h1>5</h1></li> </ul> </div> </body> </html>
CSS程式碼如下：
*{ margin:0; padding:0; } ul,li{ list-style: none; } #carousel{ width: 600px; height: 400px; background-color: rgba(255,63,63,.3); margin: 20px auto; } #carousel .slider{ padding: 0; margin: 0; position: relative; } #carousel .items{ width: 100%; position: absolute; animation: carousel 20s linear infinite; /* animation: name duration timing-function delay iteration-count direction; animation: 繫結到選擇器的keyframe名稱 花費時長 速度曲線 延遲 播放次數 是否反向播放動畫; */ } #carousel .items+.items:hover{ animation-play-state: paused; -webkit-animation-play-state: paused; /* Safari 和 Chrome */ } #carousel .items img{ width: 100%; height: 100%; } #carousel .item_1{ animation-delay: -1s; z-index: -1; } #carousel .item_2{ animation-delay: 3s; z-index: -1; } #carousel .item_3{ animation-delay: 7s; z-index: -1; } #carousel .item_4{ animation-delay: 11s; z-index: -1; } #carousel .item_5{ animation-delay: 15s; z-index: -1; } #carousel h1{ position: absolute; top: 50px; left: 200px; background-color: #FF3F3F; width: 100px; height: 100px; line-height: 100px; border-radius: 100%; font-size: 40px; color: #fff; text-align: center; } @keyframes carousel{ 0%{ opacity:0; z-index:2; } 5%{ opacity:1; z-index: 1; } 20%{ opacity:1; z-index:1; } 25%{ opacity:0; z-index:0; } 100%{ opacity:0; z-index:-1; } } /* css實現暫停 animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ */
效果圖如下：
