CSS3具有3D立體效果的數字分頁

admin發表於2018-07-03
CSSS33D

3D立體效果在某些頁面或者場景中，可能會更加美觀。

下面是一段使用CSS3程式碼實現的效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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>

相關文章