这是一款效果非常酷的纯CSS3带过渡动画特效的分页条ui设计效果。该分页条的首页、尾页、上一页和下一页按钮在鼠标滑过时，会带有非常好看的平滑拉伸动画效果。并且整个分页条带有很漂亮的阴影效果。
使用方法
HTML结构
该分页条的HTML结构如下：使用<section>元素来包裹一组无序列表。
<section class="archive-pages">
<ul>
<li class="first"><a href="#" title="first page">first page</a></li>
<li class="previous"><a href="#" title="previous page">previous page</a></li>
<li class="selected">1</li>
<li><a href="#" title="Pagina 2">2</a></li>
<li><a href="#" title="Pagina 3">3</a></li>
<li><a href="#" title="Pagina 4">4</a></li>
<li><a href="#" title="Pagina 5">5</a></li>
<li class="next"><a href="#" title="next page">next page</a></li>
<li class="last"><a href="#" title="last page">last page</a></li>
</ul>
</section>
CSS样式
在CSS样式中，首先为分页按钮和当前激活的按钮设置基本样式。
.archive-pages li a:hover{
color:#000;
}
.archive-pages li.selected{
color:white;
}
.archive-pages a,
.archive-pages a:visited{
color:#555;
}
.archive-pages li.selected{
color:white;
padding:5px;
width:18px;
line-height:20px;
background: rgb(53,121,214);
background: -moz-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)), color-stop(91%,rgba(53,121,214,1)), color-stop(100%,rgba(27,85,157,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: radial-gradient(ellipse at center, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3579d6', endColorstr='#1b559d',GradientType=1 );
}
.archive-pages ul{
float:left;
margin:0px;
padding:10px;
list-style:none;
}
.archive-pages li{
border:1px solid silver;
float:left;
font-weight:700;
margin:0 2px;
text-align:center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(214,214,214,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(214,214,214,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d6d6d6',GradientType=0 );
}
然后分别设置分页按钮鼠标滑过时的样式。
.archive-pages li.selected:hover{
cursor:default;
background: rgb(53,121,214);
background: -moz-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)), color-stop(91%,rgba(53,121,214,1)), color-stop(100%,rgba(27,85,157,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
background: radial-gradient(ellipse at center, rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3579d6', endColorstr='#1b559d',GradientType=1 );
}
.archive-pages li:hover{
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(196,196,196,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(196,196,196,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#c4c4c4',GradientType=0 );
}
首页、尾页、上一页和下一页按钮上为width,text-indent,letter-spacing这3个属性设置动画过渡效果。并且在鼠标滑过这写按钮时，相应的修改这些属性的值。
.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
overflow:hidden;
white-space:nowrap;
-webkit-transition-duration: 300ms;
-webkit-transition-property: width,text-indent,letter-spacing;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 300ms;
-moz-transition-property: width,text-indent,letter-spacing;
-moz-transition-timing-function: ease;
-o-transition-duration: 300ms;
-o-transition-property: width,text-indent,letter-spacing;
-o-transition-timing-function: ease;
transition-duration: 300ms;
transition-property: width,text-indent,letter-spacing;
transition-timing-function: ease;
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
width: 100px;
text-indent:0;
letter-spacing:0px;
}
.archive-pages .first a{
text-indent:+6px;
letter-spacing:10px;
}
.archive-pages .previous a{
text-indent:+7px;
letter-spacing:10px;
}
.archive-pages .next a{
text-indent:-159px;
letter-spacing:10px;
}
.archive-pages .last a{
text-indent:-154px;
letter-spacing:10px;
}
完整的分页样式代码可以参看下载文件的style.css文件。
