3D菜单演示及制作教程,手把手教你照片墙实战开发

今天我们要来看一款非常特别的纯CSS3
3D按钮,它的外观酷似纯白剔透的牛奶,点击按钮的时候还会出现一种很柔和的弹力效果。按钮按下时,按钮会轻轻的弹动一下,非常逼真。本文我们在观赏演示的同时,也将源代码分享出来一起学习。

《CSS3
2D转换技术之translate实战开发》
文章中,我给大家列出了CSS3中的2D转换方法:

这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3
3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面是效果图:

图片 1

1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.   
matrix()

图片 2

你也可以在这里查看在线演示

同时对第一个方法
translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉,请阅读我的博文 《CSS3
2D转换技术之translate实战开发》
 。

看了效果图是不是觉得它是一副麻将,对,第一眼我也认为是用CSS3写的麻将特效,结果我错了,它只是长得比较像而已。

接下来我们来分析一下实现这款CSS3
3D按钮的步骤及其代码,总体而言,这款CSS3
3D按钮主要由HTML代码和CSS代码组成。实现原理是用两个span来替代checkbox选中和不选中两个状态的样式。

在讲解知识点之前,我先跟大家说明一下,有些程序员会问,为什么我应用了transform后不起作用呢,其实CSS3中的transform是对块级元素或者行内元素才起作用的。

另外,你也可以在这里直接查看菜单的DEMO演示。

HTML代码:

<div>      <div>          <input type="checkbox">                    +      </div>      <div>          <input type="checkbox" checked>                    –      </div>  </div>

HTML代码很简单,我们可以看出每个checkbox下面均定义了2个span,通过对这两个span样式的定义,我们就可以模拟出checkbox选中的动画效果了。

 

接下来再分析一下实现这款3D菜单的源代码。

接下来是CSS代码:

.toggle {    margin: 4px;    display: inline-block;  }    .toggle {    box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);    border-radius: 8px;    background: #ccd0d4;    position: relative;    height: 140px;    width: 140px;  }  .toggle:before {    box-shadow: 0 0 17.5px 8.75px white;    border-radius: 118.3px;    background: white;    position: absolute;    margin-left: -50.4px;    margin-top: -50.4px;    opacity: 0.2;    content: "";    height: 100.8px;    width: 100.8px;    left: 50%;    top: 50%;  }  .toggle .button {    -webkit-filter: blur(1px);    -moz-filter: blur(1px);    filter: blur(1px);    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);    box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);    border-radius: 96.32px;    position: absolute;    background: #ccd0d4;    margin-left: -48.16px;    margin-top: -48.16px;    display: block;    height: 96.32px;    width: 96.32px;    left: 50%;    top: 50%;  }  .toggle .label {    transition: color 300ms ease-out;    text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px white;    line-height: 139px;    text-align: center;    position: absolute;    font-weight: 700;    font-size: 42px;    display: block;    opacity: 0.9;    height: 100%;    width: 100%;    color: rgba(0, 0, 0, 0.4);  }  .toggle input {    opacity: 0;    position: absolute;    cursor: pointer;    z-index: 1;    height: 100%;    width: 100%;    left: 0;    top: 0;  }  .toggle input:active ~ .button {    box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);  }  .toggle input:active ~ .label {    font-size: 40px;    color: rgba(0, 0, 0, 0.45);  }  .toggle input:checked ~ .button {    box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);  }  .toggle input:checked ~ .label {    font-size: 40px;    color: rgba(0, 0, 0, 0.4);  }

也没什么特别的,基本都是CSS3常用的一些属性,阴影动画什么的,我们只是通过对颜色的选取,以及合理地运用阴影特效,才用纯CSS3描绘出一个3D立体如牛奶般剔透的按钮动画特效。源代码下载>>


本章我将带领大家一起来探索今天的照片墙实战开发吧。好了,废话少说,直接进入今天的主题吧。

代码主要由HTML和CSS3组成,应该说还是比较简单的。

rotate,顾名思义,是表示旋转的意思,也就是说,如果我们给一个块元素或一个行内元素应用了rotate之后,它会发生旋转的效果。

首先是HTML代码:

 

<ul>    <li>      <a class='list-item' href=''>        <i class='icon-reorder'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-th-large'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-bar-chart'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-tasks'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-bell'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-archive'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-comment'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-sitemap'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-thumbs-up'></i>      </a>    </li>    <li>      <a class='list-item' href=''>        <i class='icon-tumblr'></i>      </a>    </li>  </ul>

语法:

这里用了标准的ul li列表来构建菜单的HTML框架,层次非常清晰。

 

接下来重点是CSS代码,如何用CSS3的特性来实现菜单的侧躺和阴影效果,从来让其看起来呈3D的状态。

-webkit-transform: rotate(20deg); /*兼容chrome与safari*/  -moz-transform: rotate(20deg); /*兼容firefox*/  -o-transform: rotate(20deg); /*兼容opera*/  -ms-transform: rotate(20deg); /*兼容IE9*/  transform: rotate(20deg); /*标准语法*/
ul {    position: relative;    -webkit-transform: rotate(-35deg) skew(20deg, 5deg);    -moz-transform: rotate(-35deg) skew(20deg, 5deg);    -ms-transform: rotate(-35deg) skew(20deg, 5deg);    -o-transform: rotate(-35deg) skew(20deg, 5deg);    transform: rotate(-35deg) skew(20deg, 5deg);  }

 

上面的这几行代码很关键,我们也可以看出用了CSS3的transform属性的rotate()实现菜单整体旋转一定角度,然后用skew()让菜单倾斜一个角度,这样菜单就开始有3D立体的感觉了。

 

接下来是每一个菜单项的样式:

rotate方法的参数如果是正数,则表示顺时针旋转;如果是负数,则表示逆时针旋转。

.list-item {    background: #000000;    color: #575757;    text-align: center;    height: 2.5em;    width: 4em;    vertical-align: middle;    line-height: 2.5em;    border-bottom: 1px solid #060606;    position: relative;    display: block;    text-decoration: none;    -webkit-box-shadow: -2em 1.5em 0 #e1e1e1;    -moz-box-shadow: -2em 1.5em 0 #e1e1e1;    box-shadow: -2em 1.5em 0 #e1e1e1;    -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  }  .list-item:hover {    background: #ff6e42;    color: #fffcfb;    top: -0.5em;    left: 0.5em;    -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;    -webkit-box-shadow: -2em 2em 0 #e1e1e1;    -moz-box-shadow: -2em 2em 0 #e1e1e1;    box-shadow: -2em 2em 0 #e1e1e1;  }  .list-item:hover:before, .list-item:hover:after {    -webkit-transition: all 0.25s linear;    -moz-transition: all 0.25s linear;    -o-transition: all 0.25s linear;    transition: all 0.25s linear;  }  .list-item:hover:before {    background: #b65234;    width: 1em;    top: 0.5em;    left: -1em;  }  .list-item:hover:after {    background: #b65234;    width: 1em;    bottom: -2.5em;    left: 1em;    height: 4em;  }  .list-item:before, .list-item:after {    -webkit-transition: all 0.25s linear;    -moz-transition: all 0.25s linear;    -o-transition: all 0.25s linear;    transition: all 0.25s linear;  }  .list-item:after {    content: "";    position: absolute;    height: 4em;    background: #181818;    width: 0.5em;    bottom: -2.25em;    left: 1.5em;    -webkit-transform: rotate(90deg) skew(0deg, 45deg);    -moz-transform: rotate(90deg) skew(0deg, 45deg);    -ms-transform: rotate(90deg) skew(0deg, 45deg);    -o-transform: rotate(90deg) skew(0deg, 45deg);    transform: rotate(90deg) skew(0deg, 45deg);  }  .list-item:before {    content: "";    position: absolute;    height: 2.5em;    background: #121212;    width: 0.5em;    top: 0.215em;    left: -0.45em;    -webkit-transform: skewY(-45deg);    -moz-transform: skewY(-45deg);    -ms-transform: skewY(-45deg);    -o-transform: skewY(-45deg);    transform: skewY(-45deg);  }

 

我们可以看到用了shadow实现每一个菜单项都有投影,至此,整个菜单的3D效果就已经渲染完了。

语法讲解完了,我现在手把手教大家开发一个照片墙,效果如下:

另外就是鼠标滑过菜单项的效果,利用了CSS3的动画特性让菜单项背景色渐变,形成凸起的效果。

图片 3

整个实现就是这样了,你可以下载源代码,下载地址>>

 


ok,根据效果图,我们拆分一下显示区域:一个区域显示木板背景,三个区域显示相应照片。下面就跟着我的一步步的学习吧:

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注