css3制作3D分页导航

前面本站介绍了站上分页导航效果,今天在给大家推荐一个纯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框架中有介绍一个仿BonBon3D 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

如需转载,烦请注明出处:https://www.w3cplus.com/blog/258.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部