基于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');
}

转载于:https://www.cnblogs.com/xiaochao12345/p/4363437.html

基于CSS3飘带状3D菜单菜单带小图标相关推荐

CSS导航条菜单：带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单. 拿菜鸟教程首页导航做个例子首先写一个大的div_nav,而"首页""菜鸟笔记""菜鸟工具 ...
前端——菜鸟网站横向CSS导航条菜单：带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
html表单内加入小图标,精美的HTML5/CSS3表单带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
iOS 二维码扫描和成像，成像带小图标自定义色值
工具下载:http://download.csdn.net/detail/wsk_123_123/7177635 代码: // // YYViewController.h // Dm // // Cr ...
MFC如何添加系统菜单（菜单添加小图标）
先来介绍一下要用到的函数(win32版) 函数原型:HMENU GetSystemMenu(HWND hWnd,BOOL bRevert): 参数: hWvd:拥有窗口菜单拷贝的窗口的句柄. BPev ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
餐厅菜单html代码,html5css3 3D餐厅菜单概念_订餐菜单选择工具
特效描述:html5css3 3D餐厅菜单概念订餐菜单选择工具.html5&css3 3D餐厅菜单概念代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Gourmet Cas ...
纯css3炫酷科技感菜单
下载地址一款样式炫酷的旋转导航菜单,纯css3代码实现的炫酷科技感菜单,带css3旋转动画特效. dd:

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

基于CSS3飘带状3D菜单菜单带小图标相关推荐

最新文章

热门文章

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

基于CSS3飘带状3D菜单 菜单带小图标相关推荐

最新文章

热门文章

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

基于CSS3飘带状3D菜单菜单带小图标相关推荐