生活随笔
收集整理的這篇文章主要介紹了
基于CSS3飘带状3D菜单 菜单带小图标
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這次我們要來分享一款很特別的CSS3菜單，菜單的外觀是飄帶狀的，并且每一個(gè)菜單項(xiàng)有一個(gè)精美的小圖標(biāo)，鼠標(biāo)滑過菜單項(xiàng)時(shí)，菜單項(xiàng)就會(huì)向上凸起，像是飄帶飄動(dòng)一樣，形成非常酷的3D視覺效果。這款CSS3飄帶狀3D菜單非常適合作一些活動(dòng)頁面的菜單導(dǎo)航。
在線預(yù)覽???源碼下載
實(shí)現(xiàn)的代碼。
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');??????????} ?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaochao12345/p/4363437.html
總結(jié)
以上是生活随笔為你收集整理的基于CSS3飘带状3D菜单 菜单带小图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
