css怎样设计- 列表,纯CSS3列表面板设计效果

这是一款使用CSS3制作的垂直列表面板设计效果。该列表面板可用于制作文章列表，排行列表等。在用户使用鼠标滑过列表项时，列表项会有炫酷的丝带浮动动画特效。

使用方法

HTML结构

该列表面板的HTML结构如下：使用一个

元素来包裹一组有序列表元素。

Most active Players

1. Jerry Wood

   315

2. Brandon Barnes

   301

3. Raymond Knight

   292

4. Trevor McCormick

   245

5. Andrew Fox

   203

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代码请参考下载文件。