CSS凹型導航按鈕效果的實現(xiàn)代碼
發(fā)布時間:2016-05-20 09:36:32 作者:佚名
我要評論

下面小編就為大家?guī)硪黄狢SS凹型導航按鈕效果的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧。祝大家游戲愉快哦
一般需求,圓角看起來更加舒服,但是下面直角略顯生硬
于是設計師有了下面的需求,下面加上小凹型:
凹型?凹型?凹型?有點變態(tài),這怎么實現(xiàn)...........
圖片肯定是最先考慮到的,CSS實現(xiàn)有貌似有一定難度.......
別怕,咋們遇難而上,go go...
先上html結構,這個很簡單,沒什么可以說明的:
XML/HTML Code復制內容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
- <title>css凹型導航</title>
- </head>
- <body>
- <nav id="nav">
- <ul>
- <li>
- <div class="left"></div>
- <div class="con">導航1</div>
- <div class="right"></div>
- </li>
- <li>
- <div class="left"></div>
- <div class="con">導航2</div>
- <div class="right"></div>
- </li>
- <li>
- <div class="left"></div>
- <div class="con">導航3</div>
- <div class="right"></div>
- </li>
- <li>
- <div class="left"></div>
- <div class="con">導航4</div>
- <div class="right"></div>
- </li>
- </ul>
- </nav>
- </body>
- </html>
再看CSS
CSS Code復制內容到剪貼板
- #nav {
- background: #fff;
- border-bottom: 1px solid #7bd1ff;
- width: 960px;
- margin: 100px auto;
- height: 60px;;
- }
- #nav ul li {
- float: left;
- list-style: none;
- height: 60px;
- margin: 0 10px;
- }
- li * {
- float: left;
- transition: all .2s;
- }
- .con {
- width: 60px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- background: #7bd1ff;
- border-radius: 10px 10px 0 0;
- }
- /*
- 設置凹型的尺寸,
- 通過margin定位
- */
- .left, .rightright {
- width: 7px; height: 7px; margin: 53px 0 0 0;
- }
- /*
- 下面的是關鍵,主要是用到了徑向漸變 radial-gradient,
- 通過比例劃分實現(xiàn)直接透明過度到背景色,沒有漸變
- 測試結果顯示 transparent 50% 并不能一半透明一半有顏色,70%+比較何時
- */
- .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }
- .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #7bd1ff 30%); }
- li:hover .con { background: #2d85ff }
- li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }
- li:hover .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #2d85ff 30%); }
so,這樣,是不是也沒有什么難度,輕松搞定。
以上這篇CSS凹型導航按鈕效果的實現(xiàn)代碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
CSS3中設置3D變形的transform-style屬性詳解
transform-style經常被用來做三維空間坐標系中的圖形變換,下面我們就來看看CSS3中設置3D變形的transform-style屬性詳解,需要的朋友可以參考下2016-05-23- 下面小編就為大家?guī)硪黄猚ss 元素選擇器的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-23
- 下面小編就為大家?guī)硪黄猚ss border屬性的使用方法和技巧。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-23
- 下面小編就為大家?guī)硪黄猚ss sprite簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-23
CSS3中的Transition過度與Animation動畫屬性使用要點
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當然進一步的控制還是需要JavaScript的2016-05-20- :before和:after偽元素在CSS中除了被用來添加元素、加小標、清浮動等,還有很多妙用之處,接下來我們就來看一兩個CSS中:before和:after偽元素使用的奇技淫巧2016-05-20
- 氣泡式對話框在Web頁面上如今也十分普及和常見,對話框中三角形的朝向關鍵在于before偽元素的定位,接下來我們就來看一下使用CSS繪制基礎的對話框圖案的代碼示例2016-05-20
- magic.css是一套帶64種動畫效果的CSS3動畫庫。全部使用CSS3 animation動畫來完成2016-05-19
CSS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法
下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-24