Pure CSS3 Create Pagination

       Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的 CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿 “active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的 看代码吧，希望大家喜欢。

       HTML CODE

<ul class="pager">
<li id="first"><a href="#first">« First</a></li>
<li id="page_up"><a href="#page_up">«</a></li>
<li id="one"><a href="#one">1</a></li>
<li id="two"><a href="#two">2</a></li>
<li id="three"><a href="#three">3</a></li>
<li id="four"><a href="#four">4</a></li>
<li id="five"><a href="#five">5</a></li>
<li id="six"><a href="#six">6</a></li>
<li id="seven"><a href="#seven">7</a></li>
<li id="next_page"><a href="#next_page">»</a></li>
<li id="last"><a href="#last">Last »</a></li>
</ul>

       CSS CODE

body {
background-color: #262626;
}
.demo {
width: 400px;
margin: 40px auto 0;
}
.pager li {
display: inline-block;
line-height: 25px;
}
.pager a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.pager a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
.pager li:target a {
box-shadow: 1px 0 5px #1a1a1b inset,1px 0 0 #2d2d2d,0 1px 0 #2d2d2d;
background: linear-gradient(top,#252627,#1c1c1e);
}

演示：http://www.w3cplus.com/demo/css3/pagination/index.html
下载：pagination.zip

【Pure CSS3 Create Pagination】相关文章

1. Pure CSS3 Create Luminous Button

2. Pure CSS3 Create Pagination

3. Telefónica与Mozilla开拓基于HTML5互联网设备

4. Pure CSS3 3D Buttons

5. Pure CSS3 Search Form

6. Pure CSS3 Accordion Slider

7. Pure CSS3 Circle Menu

8. Magí

9. 一个简单的CSS3文字动画插件textillate

10. 使用 CSS3 实现动感迷人的输入框 – Fancy Input

本文来源：https://www.51html5.com/a898.html