基于CSS3飘带状3D菜单 菜单带小图标

这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。



在线预览 源码下载

实现的代码。

htmll代码：

Html代码


<nav>

<menu>

<li><a href="#"><span>t</span> <span>twitter</span> </a></li>

<li id="at"><a href="#"><span>c</span> <span>codepen</span> </a></li>

<li><a href="#"><span>d</span> <span>dribbble</span> </a></li>

<li><a href="#"><span>g</span> <span>google+</span> </a></li>

</menu>

<div class="ribbon left">

</div>

<div class="ribbon right">

</div>

</nav>

css代码：

Html代码


*

{

padding: 0;

margin: 0;

border: 0;

}

*:after, *:before

{

display: block;

content: "";

position: absolute;

}

body

{

#3d332a;

background-image: url('9690bg.jpg');

padding-top: 50px;

}

nav

{

width: 476px;

margin: auto;

position: relative;

}

menu:after, menu:before

{

top: 0;

width: 60px;

height: 76px;

background: #eae2d5;

}

menu:after

{

clear: both;

right: -61px;

border-right: 1px solid #857e74;

}

menu:before

{

left: -55px;

border-left: 1px solid #857e74;

}

.ribbon

{

position: absolute;

top: 76px;

border-style: solid;

border-width: 13px;

}

.ribbon.left

{

left: -55px;

border-color: #857e74 #857e74 transparent transparent;

}

.ribbon.right

{

left: 511px;

border-color: #857e74 transparent transparent #857e74;

}

.left:after, .left:before

{

left: -68px;

border-style: solid;

z-index: -2;

}

.left:after

{

top: -68px;

border-width: 58px 0 0 56px;

border-color: #eae2d5 transparent transparent transparent;

}

.left:before

{

top: -26px;

border-width: 0 40px 38px 41px;

border-color: transparent transparent #eae2d5 transparent;

}

.right:after, .right:before

{

right: -65px;

border-style: solid;

z-index: -2;

}

.right:before

{

top: -25px;

border-width: 0 40px 38px 38px;

border-color: transparent transparent #eae2d5 transparent;

}

.right:after

{

top: -65px;

border-width: 58px 56px 0 0;

border-color: #eae2d5 transparent transparent transparent;

}

li

{

float: left;

position: relative;

margin-left: 33px;

cursor: pointer;

#eae2d5;

list-style-type: none;

border-left: 2px solid #d7cfc2;

border-right: 2px solid #d7cfc2;

transition: margin .1s ,padding .1s ,border 1s;

}

li:first-child

{

margin-left: 20px;

}

li:before, li:after

{

display: block;

position: absolute;

top: 0;

width: 20px;

height: 100%;

background: inherit;

transition: all .1s;

}

li:before

{

right: 100%;

}

li:after

{

left: 100%;

}

li:hover

{

margin-top: -9px;

box-shadow: 0 4px 10px 0px #000;

transition: margin .2s ,padding .2s;

}

li:hover:before, li:hover:after

{

height: 86%;

background: #d7cfc2;

transition: all .2s;

}

li:hover:before

{

transform: rotate(-30deg) skew(-30deg) translate(1.5px,9px);

}

li:hover:after

{

transform: rotate(30deg) skew(30deg) translate(-1.5px,9px);

}

a

{

display: block;

padding: 10px 15px;

text-decoration: none;

text-align: center;

}

a span

{

text-shadow: 1px 1px 1px #FFF;

color: #857e74;

transition: all .2s;

}

a span:first-child

{

font-family: icon;

font-size: 33px;

display: block;

}

a span:last-child

{

text-transform: capitalize;

font-family: 'Georgia';

font-size: 11px;

letter-spacing: 1px;

font-style: italic;

color: #6488ba;

}

li:hover span

{

transition: all .2s;

}

li:hover a span:first-child

{

color: #6488ba;

text-shadow: 1px 1px 1px #FFF , 0 0 1px #6488ba;

}

li:hover a span:last-child

{

color: #857e74;

}

@font-face

{

font-family: icon;

src: url('http://bennettfeely.com/fonts/icons.woff');

}