css3制作3D分页导航_3D 教程

作者：大漠日期：2012-03-20 点击：629

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

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

目标

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

HTML Markup

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

			<div id="pager">
			  <a href="javascript:void(0)">(</a>
			  <a href="javascript:void(0)"  class="on">1</a>
			  <a href="javascript:void(0)">2</a>
			  <a href="javascript:void(0)">3</a>
			  <a href="javascript:void(0)">4</a>
			  <a href="javascript:void(0)">5</a>
			  <a href="javascript:void(0)">6</a>
			  <a href="javascript:void(0)">)</a>
			</div>

在当前页上加了一个“on”类名，当然大家也可以根据自己的习惯加别的类名，比如说“active”或者“current”等。

CSS Code

			@font-face{ 
			font-family: 'WebSymbolsRegular';
			src: url('fonts/websymbols-regular-webfont.eot');
			src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
					 url('fonts/websymbols-regular-webfont.woff') format('woff'),
					 url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
					 url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
		}
		#pager {
    position:relative;
    display:block;
    overflow: visible;
    display: inline-block;
    }
		#pager a {
    font: bold 20px/30px Tahoma, Arial;
    cursor: pointer;
    text-decoration: none;
    color: #464646;
    display: block;
    float: left;
    margin-right: 1px;
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(255,255,255,0.7) 1px 0 0,
    inset rgba(255,255,255,0.7) -1px 0 0,
    rgba(0,0,0,0.3) 0 3px 0;
    padding: 2px 10px;
    min-width: 10px;
    text-align: center;
    position: relative;
    text-shadow: #fff 0 1px 0;
    background: #cdcdcd;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -ms-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    }
     
    #pager a:after {
    content: '';
    position: absolute;
    bottom: -3px;
    height: 100%;
    display: block;
    width: 100%;
    left: 0;
    box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
    }
     
    #pager a:first-child::after {
    border-radius: 500px 0 0 500px;
    }
     
    #pager a:last-child::after {
    border-radius: 0 50px 50px 0;
    }
     
    #pager a.on:after {
    bottom: -1px;
    }
     
    #pager a:before {
    content: '';
    position: absolute;
    top: 1px;
    height: 100%;
    box-shadow: rgba(0,0,0,0.4) 0 3px 0;
    width: 1px;
    display: block;
    background: rgba(0,0,0,0.4);
    right: -1px;
    }
     
    #pager a:last-child::before {
    display: none !important;
    }
     
    #pager a:first-child {
    border-radius:50px 0 0 50px;
    font-family: 'WebSymbolsRegular';
    }
     
    #pager a:last-child {
    border-radius:0 50px 50px 0;
    font-family: 'WebSymbolsRegular';
    }
     
    #pager a:hover {
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(255,255,255,0.7) 1px 0 0,
    inset rgba(255,255,255,0.7) -1px 0 0,
    inset rgba(255,255,255,1) 0 0 15px,
    rgba(0,0,0,0.2) 0 3px 0;    
    }
     
    #pager a:active {
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(0,0,0,0.3) 1px 0 0px,
    inset rgba(0,0,0,0.3) -1px 0 0px,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(0,0,0,0.1) 0 0 15px,
    rgba(0,0,0,0.2) 0 2px 0;
    top: 1px;
    text-shadow: #fff 0 0 15px;
    }
     
    #pager a:active:after {
    bottom:-2px;
    }
     
    #pager a:active:before {
    box-shadow: rgba(0,0,0,0.4) 0 2px 0;
    top: 0px;
    }
     
    #pager a.on {
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(0,0,0,0.3) 1px 0 0px,
    inset rgba(0,0,0,0.3) -1px 0 0px,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(0,0,0,0.1) 0 0 15px,
    rgba(0,0,0,0.3) 0 1px 0;
    top: 2px;
    text-shadow: #fff 0 0 15px;
    }
     
    #pager a.on:before {
    box-shadow: rgba(0,0,0,0.4) 0 3px 0;
    top: -1px;
    }
     
    #pager a.on:active:after {
    bottom:-1px;
    }

上面的样式，有几个关键之处想和大家一起分享：

1、web实体符

上面效果中的向前向后按钮，我们并没有使用任何图片，而是使用的web实体符。使用web实体符需要两点：首先在WebSymbolsRegular中下载WebSymbols-Font-Pack.zip文件包，你也可以下载WebSymbols-Regular.otf.zip字体包；然后使用@font-face调用web实体符字体

			@font-face{ 
				font-family: 'WebSymbolsRegular';
				src: url('fonts/websymbols-regular-webfont.eot');
				src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
						 url('fonts/websymbols-regular-webfont.woff') format('woff'),
						 url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
						 url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
			}

这样一来，你就可以在需要使用的地方调用这个“WebSymbolsRegular”字体：

			#pager a:first-child {
			border-radius:50px 0 0 50px;
			font-family: 'WebSymbolsRegular';
			}
			 
			#pager a:last-child {
			border-radius:0 50px 50px 0;
			font-family: 'WebSymbolsRegular';
			}

2、立体效果

大家都看到上面的导航具有立体效果，其实这也是CSS3中“box-shadow”实现的。如果您有关注本站的话，在前面的CSS3 Buttons框架中有介绍一个仿BonBon的3D Css3 Buttons效果。其实我们此处的3D效果也是类似这样的原理：

			#pager a {
    font: bold 20px/30px Tahoma, Arial;
    cursor: pointer;
    text-decoration: none;
    color: #464646;
    display: block;
    float: left;
    margin-right: 1px;
		
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(255,255,255,0.7) 1px 0 0,
    inset rgba(255,255,255,0.7) -1px 0 0,
    rgba(0,0,0,0.3) 0 3px 0;
		
    padding: 2px 10px;
    min-width: 10px;
    text-align: center;
    position: relative;
    text-shadow: #fff 0 1px 0;
    background: #cdcdcd;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -ms-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9));
    }
     
    #pager a:after {
    content: '';
    position: absolute;
    bottom: -3px;
    height: 100%;
    display: block;
    width: 100%;
    left: 0;
		
    box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0;
			
		}
    #pager a:before {
    content: '';
    position: absolute;
    top: 1px;
    height: 100%;
		
    box-shadow: rgba(0,0,0,0.4) 0 3px 0;
		
    width: 1px;
    display: block;
    background: rgba(0,0,0,0.4);
    right: -1px;
    }

3、hover和active效果

另外使用伪类制作了悬浮和按下那刻的效果。

			#pager a:hover {
				box-shadow:
				inset rgba(0,0,0,0.1) 0 1px 0,
				inset rgba(255,255,255,0.7) 0 2px 0,
				inset rgba(255,255,255,0.7) 0 -1px 0,
				inset rgba(255,255,255,0.7) 1px 0 0,
				inset rgba(255,255,255,0.7) -1px 0 0,
				inset rgba(255,255,255,1) 0 0 15px,
				rgba(0,0,0,0.2) 0 3px 0;    
				}
				 
				#pager a:active {
				box-shadow:
				inset rgba(0,0,0,0.1) 0 1px 0,
				inset rgba(0,0,0,0.3) 1px 0 0px,
				inset rgba(0,0,0,0.3) -1px 0 0px,
				inset rgba(255,255,255,0.7) 0 2px 0,
				inset rgba(255,255,255,0.7) 0 -1px 0,
				inset rgba(0,0,0,0.1) 0 0 15px,
				rgba(0,0,0,0.2) 0 2px 0;
				top: 1px;
				text-shadow: #fff 0 0 15px;
				}
				 
				#pager a:active:after {
				bottom:-2px;
				}
				 
				#pager a:active:before {
				box-shadow: rgba(0,0,0,0.4) 0 2px 0;
				top: 0px;
				}

4、当前页的效果

这里使用jQuery的“click”事件，当你点击页面时会给点击项添加一个“on”类名，同时移除相邻元素的“on”类名，并配合相关样式实现了当前页的效果：

jQuery Code

			$(document).ready(function(){
			 $("#pager a").click(function(){
			  $(this).addClass("on").siblings().removeClass("on");
			 });
			});

接下来给“.on”添加不同的样式：

			#pager a.on {
    box-shadow:
    inset rgba(0,0,0,0.1) 0 1px 0,
    inset rgba(0,0,0,0.3) 1px 0 0px,
    inset rgba(0,0,0,0.3) -1px 0 0px,
    inset rgba(255,255,255,0.7) 0 2px 0,
    inset rgba(255,255,255,0.7) 0 -1px 0,
    inset rgba(0,0,0,0.1) 0 0 15px,
    rgba(0,0,0,0.3) 0 1px 0;
    top: 2px;
    text-shadow: #fff 0 0 15px;
    }
     
    #pager a.on:before {
    box-shadow: rgba(0,0,0,0.4) 0 3px 0;
    top: -1px;
    }
		#pager a.on:after {
    bottom: -1px;
    }
     
    #pager a.on:active:after {
    bottom:-1px;
    }

完成这段代码后，今天的目标就算是完成了，不知道你喜欢？最后给大家附上一份web实体符对照表：

要是你感兴趣可以狠狠点这里下载。有关于WebSymbolsRegular更详细的介绍或关注他的相关更新情况，您可以移步到这里。

最后希望大家喜欢这两部分内容，如果您有更好的建议请在下面的评论中直接给我留言。

转载烦请注明出处：W3CPLUS

UA Air Jordan 1

上一篇: CSS3制作分享按钮 | 下一篇: CSS3美化有序列表

w3cplus

css3制作3D分页导航

目标

HTML Markup

CSS Code

jQuery Code

直达目的地(^_^)

关于我们

关于站长

我的作品

w3cplus

你在这里

css3制作3D分页导航

目标

HTML Markup

CSS Code

jQuery Code

直达目的地(^_^)

关于我们

关于站长

我的作品