CSS3制作3D立体分页导航

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3制作3D立体分页导航

收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧,将有关PSD图效果转换成CSS3效果。灵光的冲动,让我开始做起了这件事情,今天开始我会开始制作一些CSS3的DEMO效果,而这些DEMO效果都是由对应的PSD转换过来的,换句话说,如果你不考虑兼容IE低版本的话,这些DEMO你都可以使用。那我们开始吧

这个DEMO主要是一个3D立体居中的分页导航效果,其实主要三个关键处,第一渐变有明显的分隔线,即上半部是一色,下半部是一色;第二使用box-shadow来制作立体效果;第三使用CSS3伪类选择器,改变第一和最后两年导航项的效果。详细的看代码吧。

demodownload

HTML 结构:

<div class="pager">
  <a href="#">prev</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="current">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">next</a>
</div<

CSS 代码

*{
  margin: 0;
  padding: 0;
}
body {
  background: url(data:image/jpeg;base64,/...=) repeat;
}
.pager {
  margin: 20px;
  text-align: center;
}
.pager a {
  display: inline-block;
  padding: 5px 15px;
  color: #474747;
  font-size: 26px;
  font-family: 'Francois One', sans-serif;
  text-transform: capitalize;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #fff;
  box-shadow: 0 1px 0 0 #a1a0a0,0 2px 0 0 #a1a0a0,0 3px 0 0 #a1a0a0,0 4px 0 0 #a1a0a0,0 5px 0 0 #a1a0a0;
  background: #e7e7e7; /* Old browsers */
  background-color: #ffffff; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 49%, #e7e7e7 50%, #e7e7e7 1%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#e7e7e7), color-stop(99%,#e7e7e7)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* IE10+ */
  background-image: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-8 */
}
.pager a:first-child,
.pager a:last-child {
  color: #fff;
  background-color: #f35252; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzNTI1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzNTI1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2IzMDEwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMzAxMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background-image: -moz-linear-gradient(top,  #f35252 0%, #f35252 50%, #b30101 51%, #b30101 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f35252), color-stop(50%,#f35252), color-stop(51%,#b30101), color-stop(100%,#b30101)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* IE10+ */
  background-image: linear-gradient(to bottom,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f35252', endColorstr='#b30101',GradientType=0 ); /* IE6-8 */
  box-shadow: 0 1px 0 0 #7f0505,0 2px 0 0 #7f0505,0 3px 0 0 #7f0505,0 4px 0 0 #7f0505,0 5px 0 0 #7f0505;
  border-color: #e25c5c #b75555 #d96767 #fdb0b0;
}
.pager a:hover,
.pager a:active,
.pager a.current{
  box-shadow: 0 1px 0 0 #a1a0a0,0 2px 0 0 #a1a0a0,0 3px 0 0 #a1a0a0;
  position:relative;
  top:2px;
}
.pager a:first-child:hover,
.pager a:last-child:hover {
  box-shadow: 0 1px 0 0 #7f0505,0 2px 0 0 #7f0505,0 3px 0 0 #7f0505;
}

demodownload

如需转载,烦请注明出处:http://www.w3cplus.com/demo/css3-pager.html

Lebron Soldiers XI 11

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

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

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