U声U色
- UID33864
- 粉丝1
- 关注0
- 发帖数1
- 铜币12枚
- 威望12点
- 贡献0点
|
阅读：1947回复：0
[CSS3技术]Pure CSS3 Create Pagination
楼主#
更多
发布于：2015-08-31 13:20
[tr][td] Pagination（分页导航）效果，可以说每个网站都会有的效果，制作原理简单，今天我们也用css3制作了一个分页导航的效果，整个效果使用的
CSS3属性很少，主要使用gradient来制作了渐变图片，使用border-radius来制作了圆角，不过藤藤在这个案例中为了模仿
“active”效果，使用了“:target”属性来做的，实际生产中建议这么使用，因为active可以通过程序来控制，不是我们CSS的菜。详细的
看代码吧，希望大家喜欢。
图片：142650ffecvb8bizz18ble.jpg 
HTML CODE
[*]« First
[*]«
[*]1
[*]2
[*]3
[*]4
[*]5
[*]6
[*]7
[*]»
[*]Last »
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
[/td][/tr]
|
