資訊專欄INFORMATION COLUMN
摘要：布局實(shí)現(xiàn)基本樣式，不多解釋實(shí)現(xiàn)導(dǎo)航下劃線下面實(shí)現(xiàn)動(dòng)畫部分。這里就完成了一個(gè)純的下劃線動(dòng)畫導(dǎo)航。最后的效果查看擴(kuò)展當(dāng)我們會(huì)實(shí)現(xiàn)水平的下劃線動(dòng)畫導(dǎo)航后，實(shí)現(xiàn)背景移動(dòng)動(dòng)畫導(dǎo)航思路也是一樣，不過是高度寬度的變化，背景透明度的變化。
看別人網(wǎng)站的時(shí)候，看到一種導(dǎo)航菜單的動(dòng)畫，覺得很有意思，就仔細(xì)研究起來。
目前見過的動(dòng)畫有三種：水平下劃線動(dòng)畫導(dǎo)航、水平背景動(dòng)畫導(dǎo)航、垂直動(dòng)畫導(dǎo)航，他們實(shí)現(xiàn)思路都是一樣的，都是依賴 css3的同級(jí)通用選擇器 "~" 。
自己實(shí)現(xiàn)了一遍，本文簡(jiǎn)要記錄實(shí)現(xiàn)的思想。
大家可以先看看最后實(shí)現(xiàn)的效果：Demo點(diǎn)我
實(shí)現(xiàn)思路 HTML 結(jié)構(gòu)HTML結(jié)構(gòu)沒有特殊，就是 ul -> li:
最后一個(gè)li空著，留著后面有用。
CSS 布局實(shí)現(xiàn)基本樣式，不多解釋：
ul {
position: relative;
overflow: hidden;
padding-left: 0px;
}
li {
list-style: none outside;
position: relative;
z-index: 1;
float: left;
padding: 0 0 0 0;
margin-right: 10px;
}
li a {
position: relative;
width: 100px;
color:#333 ;
display: block;
margin: 0 0;
border-bottom: 5px solid transparent;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
.selected a {
border-bottom: 5px solid #cfd0d0;
color: #511d7f;
}
實(shí)現(xiàn)導(dǎo)航下劃線
下面實(shí)現(xiàn)動(dòng)畫部分。
下方紫色滾動(dòng)條是通過，剛才留著的最后一個(gè)li元素實(shí)現(xiàn)。
.quebec {
position: absolute;
bottom: 0px;
left: -100px;
z-index: 3;
margin: 0;
border: 0;
width: 5px;
height: 5px;
padding: 0;
overflow: hidden;
background: #511d7f;
-webkit-transition-property: left, width;
-moz-transition-property: left, width;
-ms-transition-property: left, width;
-o-transition-property: left, width;
transition-property: left, width;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
}
通過絕對(duì)定位，把最后一個(gè) li.quebec 定位到導(dǎo)航下方，設(shè)置寬度高度。設(shè)置 transition，當(dāng)我們改變 left, width的時(shí)候就能實(shí)現(xiàn)動(dòng)畫。
動(dòng)起來當(dāng)hover到導(dǎo)航上面的時(shí)候，li.quebec 就定位left到其下面。實(shí)現(xiàn)這個(gè)效果的是css3的同級(jí)通用選擇器 “～”
比如 A ~ B 匹配的是 任何在A元素之后的同級(jí)B元素。
.n1:hover ~ li.quebec { left: 5px; width: 110px; }
.n2:hover ~ li.quebec { left: 115px; width: 110px; }
.n3:hover ~ li.quebec { left: 225px; width: 110px; }
.n4:hover ~ li.quebec { left: 335px; width: 110px; }
這里就完成了一個(gè) 純css的下劃線動(dòng)畫導(dǎo)航。 最后的效果：Demo查看
擴(kuò)展當(dāng)我們會(huì)實(shí)現(xiàn)水平的下劃線動(dòng)畫導(dǎo)航后，實(shí)現(xiàn) 背景移動(dòng)動(dòng)畫導(dǎo)航 思路也是一樣，不過是li.quebec高度寬度的變化，背景透明度的變化。
垂直的動(dòng)畫導(dǎo)航 亦是如此，改變 li.quebec 的高度寬度，通過 translateY 控制其在垂直方向的位置。
為了效果更炫一點(diǎn)，我們還可以在hover不同li的時(shí)候，改變li.quebec的顏色、背景、透明度等。
原創(chuàng)文章，歡迎轉(zhuǎn)載。轉(zhuǎn)載請(qǐng)注明：轉(zhuǎn)載自Fs21 " s Home，謝謝！
原文鏈接地址：純css實(shí)現(xiàn)Magicline Navigation(下劃線動(dòng)畫導(dǎo)航菜單)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78436.html
摘要：設(shè)置為相對(duì)定位和的高度，加一下過渡屬性給元素加上絕對(duì)定位和一些過渡。補(bǔ)充一些美化的樣式還要給滑動(dòng)的導(dǎo)航美化一下，包括菜單顯示隱藏時(shí)的樣式背景色菜單圖標(biāo)等。待會(huì)兒會(huì)用來進(jìn)行操作酷炫的滑動(dòng)動(dòng)畫。 Off-Canvas 滑動(dòng)導(dǎo)航現(xiàn)在逐漸在移動(dòng)頁面變得越來越流行了，本文就將討論如何通過 jQuery 增添、刪除類來操作 CSS 過渡和動(dòng)畫完成這樣的效果。 本教程將用到的資源： Font-...
摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...
摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...
閱讀 869·2021-10-09 09:58
閱讀 714·2021-08-27 16:24
閱讀 1793·2019-08-30 14:15
閱讀 2438·2019-08-30 11:04
閱讀 2169·2019-08-29 18:43
閱讀 2232·2019-08-29 15:20
閱讀 2783·2019-08-26 12:20
閱讀 1704·2019-08-26 11:44
