純CSS3列表面板設計效果

簡要教程

這是一款使用CSS3製作的垂直列表面板設計效果。該列表面板可用於製作文章列表，排行列表等。在使用者使用滑鼠滑過清單項目時，清單項目會有炫酷的絲帶浮動動畫特效。

使用方法

HTML結構

該列表面板的HTML結構如下：使用一個<div>元素來包裹一組有序列表元素。

<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列表面板設計效果的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

