用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - css代码库

纯css3做的3D立体分页按钮

2014-03-30 作者： IT技术宅举报

[css]代码库

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>CSS3打造3D分页导航</title>
  <link href="css/default.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript">  
		$(document).ready(function() {
			$("#pager a").click(function() {
			$(this).addClass("on").siblings().removeClass("on");
		}
		);});
  </script>
  <style>
  @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;
	margin:300px 400px;
}
#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;
}

  </style>
</head>

<body>
<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></body>
</html>

[代码运行效果截图]


纯css3做的3D立体分页按钮


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...