簡要教學
這是一款效果非常酷的純CSS3帶過渡動畫特效的分頁條ui設計效果。該分頁條的首頁、尾頁、上一頁和下一頁按鈕在滑鼠滑過時，會帶有非常好看的平滑拉伸動畫效果。並且整個分頁條帶有很漂亮的陰影效果。
使用方法
HTML結構
此分頁條的HTML結構如下：使用
<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檔案。
以上就是純CSS3帶過渡動畫特效的分頁條ui設計效果的內容，更多相關內容請關注PHP中文網（www.php.cn）！
