簡要教學
這是一款使用CSS3製作的垂直清單面板設計效果。此列表面板可用於製作文章列表,排行列表等。當使用者使用滑鼠滑過清單項目時,列表項目會有酷炫的絲帶浮動動畫特效。
使用方法
HTML結構
該列表面板的HTML結構如下:使用一個
<div class="leaderboard"> <h1> <svg class="ico-cup"> <use xlink:href="#cup"></use> </svg> Most active Players </h1> <ol> <li> <mark>Jerry Wood</mark> <small>315</small> </li> <li> <mark>Brandon Barnes</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> </ol> </div> </div>
CSS樣式
列表項的絲帶效果使用列表項目li元素的:before和:after偽元素來製作,預設情況下它們的透明度opacity為0,。
.leaderboard ol li mark { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; padding: 18px 10px 18px 50px; margin: 0; background: none; color: #fff; } .leaderboard ol li mark::before, .leaderboard ol li mark::after { content: ''; position: absolute; z-index: 1; bottom: -11px; left: -9px; border-top: 10px solid #c24448; border-left: 10px solid transparent; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; opacity: 0; } .leaderboard ol li mark::after { left: auto; right: -9px; border-left: none; border-right: 10px solid transparent; } .leaderboard ol li small { position: relative; z-index: 2; display: block; text-align: right; } .leaderboard ol li::after { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: #fa6855; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0; }
當滑鼠滑過清單項目時,絲帶的透明度opacity被設定為1,。
.leaderboard ol li:hover::after { opacity: 1; -webkit-transform: scaleX(1.06) scaleY(1.03); transform: scaleX(1.06) scaleY(1.03); } .leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after { opacity: 1; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; }
完整的CSS程式碼請參考下載檔。
以上就是純CSS3列表面板設計效果的內容,更多相關內容請關注PHP中文網(www.php.cn)!