CSS3實現(xiàn)菜單懸停效果

發(fā)布時間：2020-11-17 17:22:43 作者：Callum Williams

這篇文章主要介紹了CSS3實現(xiàn)菜單懸停效果的示例代碼，幫助大家更好的制作CSS3特效，美化網(wǎng)頁，感興趣的朋友可以了解下

實現(xiàn)效果：

html

<nav id="nav-1">
  <a class="link-1" href="#">Home</a>
  <a class="link-1" href="#">About</a>
  <a class="link-1" href="#">Contact</a>
  <a class="link-1" href="#">Shop</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">Home</a>
  <a class="link-2" href="#">About</a>
  <a class="link-2" href="#">Contact</a>
  <a class="link-2" href="#">Shop</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">Home</a>
  <a class="link-3" href="#">About</a>
  <a class="link-3" href="#">Contact</a>
  <a class="link-3" href="#">Shop</a>
</nav>

css

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  background: #3fa46a;
}
#nav-2 {
  background: #5175C0;
}
#nav-3 {
  background: #EEA200;
}

.link-1 {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

.link-2 {
  transition: 0.6s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-right: 2px dotted transparent;
  padding: 30px 8px 0 10px;
  margin: 0 10px;
}
.link-2:hover {
  border-right: 2px dotted #ffffff;
  padding-bottom: 24px;
}
.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.link-3:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 24px 10px;
}

以上就是CSS3實現(xiàn)菜單懸停效果的詳細(xì)內(nèi)容，更多關(guān)于css3 菜單懸停的資料請關(guān)注腳本之家其它相關(guān)文章！

Tag：懸停菜單 CSS3

相關(guān)文章

詳解CSS3：overflow屬性
這篇文章主要介紹了詳解CSS3：overflow屬性的相關(guān)資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下
2020-11-17
詳解css3中的偽類before和after常見用法
這篇文章主要介紹了詳解css3中的偽類before和after常見用法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-17
CSS3+HTML5+JS 實現(xiàn)一個塊的收縮與展開動畫效果
這篇文章主要介紹了CSS3+HTML5+JS 實現(xiàn)一個塊的收縮與展開動畫效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-17
10種CSS3實現(xiàn)的loading動畫，挑一個走吧？
這篇文章主要介紹了10種CSS3實現(xiàn)的loading動畫，幫助大家更好的美化自身網(wǎng)頁，完成需求，感興趣的朋友可以了解下
2020-11-16
CSS3實現(xiàn)帶剪切動畫的幻燈片特效代碼
帶剪切動畫的幻燈片這是一款帶剪切動畫的幻燈片，幻燈片切換時，會以「左」、「右」箭頭為中心進(jìn)行展開，適合通欄的設(shè)計?；脽羝褂昧?CSS3 屬性，不兼容低級瀏覽器，喜歡
2020-11-16
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的
2020-11-16
CSS3懸停展開旋轉(zhuǎn)菜單特效代碼
CSS3懸停展開旋轉(zhuǎn)菜單特效代碼是一款鼠標(biāo)移動到頭像上就會展開旋轉(zhuǎn)菜單特效。
2020-11-16
純CSS3進(jìn)度條漸變加載特效代碼
純CSS3進(jìn)度條漸變加載特效代碼是一款基于css3 keyframes制作的創(chuàng)意有趣的進(jìn)度條漸變加載loading動畫特效代碼。
2020-11-16
CSS3 實現(xiàn)穿梭星空動畫
這篇文章主要介紹了CSS3 實現(xiàn)穿梭星空動畫的示例，幫助大家更好的理解和制作CSS3特效，用來美化網(wǎng)頁，感興趣的朋友可以了解下
2020-11-13
css3實現(xiàn)平移效果(transfrom：translate)的示例
這篇文章主要介紹了css3實現(xiàn)平移效果(transfrom：translate)的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著
2020-11-13