CSS3具有3D立体效果的数字分页

快乐打工仔 分类:实例代码

CSS3具有3D立体效果的数字分页属于前端实例代码,有关更多实例代码大家可以查看

3D立体效果在某些页面或者场景中,可能会更加美观。

下面是一段使用CSS3代码实现的效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

CSS3具有3D立体效果的数字分页,这样的场景在实际项目中还是用的比较多的,关于CSS3具有3D立体效果的数字分页就介绍到这了。

回复

我来回复
  • 暂无回复内容