pager

css3制作3D分页导航

前面本站介绍了站上分页导航效果,今天在给大家推荐一个纯CSS制作的分布导航效果,这个效果中没有使用任何图片,并使用jQuery实现了“active”的效果。还有一个特别之处就是使用了WebSymbolsRegular制作了向前向后的箭头效果。

目标

今天我们的目标就是使用纯CSS来制作上图的一个分面导航的效果。

HTML Markup

这个效果用到的HTML结构就相当的简单了,就是一个容器“div#pager”里面放了一些“a”链接标签:

CSS3制作的分页导航

W3cplus第二版本刚上线时,好多位朋友向我问起站上的分页导航样式是怎么制作,像是图片一样。前面都是随便说了一下制作的过程,为了报答各位朋友一持对本站的大力支持,今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。

目标

今天我们主要的目的是使用CSS3等相关属性来制作W3cplus站点上的分页导航效果,大家可以这点击这里查看站点上的效果,也可以直击下面的效果图:

在这个效果中,其实只有两大看点:

返回顶部