CSS3实现的具有3D立体效果的数目字分页代码

CSS3实现的具有3D立体效果的数字分页代码

CSS3实现的具有3D立体效果的数字分页代码:
3D立体效果在某些页面或者场景中，可能会更加美观，不过使用CSS3实现起来可能比较有困难，下面分享一段使用CSS3实现的此中效果，希望能够给需的朋友带来借鉴作用，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ui-page 
{
  border:0px;
  background:#37578C;
  background:-webkit-linear-gradient(#37578C, #608BAE);
  background:-moz-linear-gradient(#37578C, #608BAE);
  background:-ms-linear-gradient(#37578C, #608BAE);
  background:-o-linear-gradient(#37578C, #608BAE);
  background:linear-gradient(#37578C, #608BAE);
  box-shadow:0px 4px 0px 0px #37578C;
  color:#FFFFFF;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  font-size:13px;
  text-decoration:none;
  vertical-align:middle;
}
.ui-page: hover 
{
  background:#89B5D2;
  color:#CCCCCC;
}
.ui-page: active{background:#1B435E;}
.ui-page-curr 
{
  padding:2px 10px 2px 10px;
  border-radius:5px 5px 5px 5px;
  background:#89B5D2;
  text-align:center;
}
.ui-page-prev 
{
  padding:2px 10px 2px 15px;
  border-radius:20px 10px 10px 20px;
  text-align:right;
}
.ui-page-numx 
{
  padding:2px 10px 2px 10px;
  border-radius:5px 5px 5px 5px;
  text-align:center;
}
.ui-page-next 
{
  padding:2px 15px 2px 10px;
  border-radius:5px 20px 20px 5px;
  text-align:left;
}
</style>
</head>
<body>
<button id="cssTest" class="ui-page ui-page-prev" type="button">上一页</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">...</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">6</button>
<button id="cssTest" class="ui-page ui-page-curr" type="button">7</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">8</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">...</button>
<button id="cssTest" class="ui-page ui-page-next" type="button">下一页</button>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10927

更多内容可以参阅:http://www.softwhy.com/divcss/

CSS3实现的具有3D立体效果的数目字分页代码

相关推荐