常見的幾種css下劃線動(dòng)畫

言：

導(dǎo)航欄下劃線動(dòng)畫在網(wǎng)頁設(shè)計(jì)中是非常常見的交互，下面將介紹幾種非常常見，非常nice的動(dòng)畫特效，廢話不多說直接上演示和代碼。

一、效果圖：

css下劃線

二、源碼如下：

<body>
		<p>樣式1</p>
		<ul id="demo1">
			<li>首頁</li>
			<li>產(chǎn)品</li>
			<li>服務(wù)</li>
			<li>關(guān)于</li>
		</ul>
		
		<p>樣式2</p>
		<ul id="demo2">
			<li>首頁</li>
			<li>產(chǎn)品</li>
			<li>服務(wù)</li>
			<li>關(guān)于</li>
		</ul>
		
		<p>樣式3</p>
		<ul id="demo3">
			<li>首頁</li>
			<li>產(chǎn)品</li>
			<li>服務(wù)</li>
			<li>關(guān)于</li>
		</ul>
		
		<p>樣式4</p>
		<ul id="demo4">
			<li>首頁</li>
			<li>產(chǎn)品</li>
			<li>服務(wù)</li>
			<li>關(guān)于</li>
		</ul>
	</body>
	<style type="text/css">
		p{
			text-align: center;
			margin: 40px 0 10px 0;
		}
		ul{
			padding: 0;
			width: 400px;
			height: 45px;
			margin:  auto;
			list-style: none;
			background-color: rgb(0,0,0,0.3);
			display: flex;
		}
		li{
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		/***************樣式1   *********/
		#demo1 li:before{
			content: '';
			position: absolute;
			width: 80%;
			left: 10%;
			bottom: 10px;
			height: 5px;
			background-color: coral;
			opacity: 0;
		}
		#demo1 li:hover:before{
			bottom: 0;
			opacity: 1;
			transition: bottom 0.3s,opacity 0.3s 0.1s;
		}
		/***************樣式2   *********/
		#demo2 li:before{
			content: '';
			position: absolute;
			width: 0;
			left: 50%;
			bottom: 0;
			height: 5px;
			background-color: coral;
		}
		#demo2 li:hover:before{
			width: 80%;
			left: 10%;
			transition: all 0.5s;
		}
		/***************樣式3   *********/
		#demo3 li:before{
			content: '';
			position: absolute;
			width: 0;
			left: 100%;
			bottom: 0;
			height: 5px;
			background-color: coral;
		}
		#demo3 li:hover:before{
			width: 80%;
			left: 10%;
			transition: all 0.5s;
		}
		#demo3 li:hover ~ li:before{
			left: 0;
		}
		
		/***************樣式4   *********/
		#demo4 li:before{
			content: '';
			position: absolute;
			width: 0;
			left: 0;
			bottom: 0;
			height: 5px;
			background-color: coral;
		}
		#demo4 li:after{
			content: '';
			position: absolute;
			width: 0;
			right: 0;
			bottom: 0;
			height: 5px;
			background-color: coral;
		}
		#demo4 li:hover:before{
			width: 50%;
			transition: all 0.3s ease-in-out; 
		}
		#demo4 li:hover:after{
			width: 50%;
			transition: all 0.3s ease-in-out;
		}
	</style>

如果對(duì)你有所幫助，點(diǎn)贊+收藏 再走

向上的路并不擁擠，而大多數(shù)人選擇了安逸

著現(xiàn)代 CSS 技術(shù)的發(fā)展，CSS 新特性被越來越多的瀏覽器所支持，本文主要講述使用純 CSS 實(shí)現(xiàn)3D導(dǎo)航欄的步驟，并對(duì)其中用到的關(guān)鍵樣式做一個(gè)解析。

1.整體效果

2.實(shí)現(xiàn)方案

實(shí)現(xiàn)方案將從一個(gè)基礎(chǔ)的樣式寫起，然后逐漸添加響應(yīng)的偽元素來實(shí)現(xiàn)不同的邊，實(shí)現(xiàn)3D效果。與此同時(shí)，實(shí)現(xiàn)的過程中還給導(dǎo)航設(shè)置了動(dòng)畫，方便鼠標(biāo) hover 的時(shí)候有個(gè)更好地用戶體驗(yàn)。

2.1.基礎(chǔ)框架編寫

小懶首先通過 html:5 快速創(chuàng)建 html5 頁面基礎(chǔ)框架，然后通過 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速創(chuàng)建導(dǎo)航 html 框架。同時(shí)給基礎(chǔ)框架增加了基礎(chǔ)樣式，樣式中我們使用了現(xiàn)代 CSS 的一些特性，比如 CSS 元素嵌套（插入鏈接）、CSS 自定義屬性等新的特性。

<style>
  :root {
    --color: #4855B0;
  }
  body { margin: 0; padding: 0}
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    .navlist {
      list-style: none;
      padding: 0;
      & li {
        & a {
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<!--div[class=container]>ul[class=navlist]>(li>a[href=#])*5-->
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權(quán)限管理</a></li>
  </ul>
</div>

效果如下：

2.2.3D效果實(shí)現(xiàn)

為了實(shí)現(xiàn) 3D 效果，需要旋轉(zhuǎn)對(duì)各面做傾斜變化，正面需要Y軸傾斜 -15deg，側(cè)面需要Y軸傾斜 45deg，頂面需要X傾斜 45deg。側(cè)面和頂面我們使用 CSS 偽元素 ::before 和 ::after 來實(shí)現(xiàn)。在CSS 實(shí)現(xiàn)中背景顏色我們使用 color-mix 顏色混合函數(shù)來自動(dòng)計(jì)算背景顏色。

// 正面
a {
  transform: skewY(-15deg);
}
a {
  &::before {
    position: absolute;
    left: -20px;
    bottom: 10px;
    width: 20px;
    height: 100%;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewY(45deg);
    transition: background-color 200ms;
  }
  &::after {
    position: absolute;
    left: -10px;
    top: -20px;
    width: 100%;
    height: 20px;
    content: "";
    background-color: color-mix(in srgb, var(--color), black 20%);
    transform: skewX(45deg);
  }
}

效果圖如下：

從上面效果圖可以看到，3D效果已經(jīng)實(shí)現(xiàn)，但是頂面和正面的層級(jí)還是有點(diǎn)問題，以至于效果看著比較別扭，我們?cè)僬w調(diào)試一節(jié)中將調(diào)試細(xì)節(jié)。請(qǐng)注意：color-mix 函數(shù)雖然得到大多數(shù)現(xiàn)代瀏覽器的支持，但是在生成環(huán)境中請(qǐng)謹(jǐn)慎使用。

2.3.整體調(diào)試

1）首先對(duì)導(dǎo)航的各項(xiàng)做了層級(jí)定義：

& li {
  &:nth-child(1) {
    & a {
      z-index: 5;
    }
  }
  &:nth-child(2) {
    & a {
      z-index: 4;
    }
  }
  &:nth-child(3) {
    & a {
      z-index: 3;
    }
  }
  &:nth-child(4) {
    & a {
      z-index: 2;
    }
  }
  &:nth-child(5) {
    & a {
      z-index: 1;
    }
  }
}

對(duì)頂面的偽元素設(shè)置層級(jí)

&::after {
  z-index: -1;
}

給各面定義動(dòng)畫

& a {
  transition: left 200ms, background-color 200ms;
  
  &::before {
    transition: background-color 200ms;
  }
  &::after {
    transition: background-color 200ms;
  }
}

4）整體實(shí)現(xiàn)代碼

<style>
  :root {
    --color: #4855B0;
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 150px;
    .navlist {
      list-style: none;
      padding: 0;
      transform: skewY(-15deg);
      & li {
        &:nth-child(1) {
          & a {
            z-index: 5;
          }
        }
        &:nth-child(2) {
          & a {
            z-index: 4;
          }
        }
        &:nth-child(3) {
          & a {
            z-index: 3;
          }
        }
        &:nth-child(4) {
          & a {
            z-index: 2;
          }
        }
        &:nth-child(5) {
          & a {
            z-index: 1;
          }
        }
        & a {
          position: relative;
          left: 0;
          display: block;
          padding: 15px 25px;
          background-color: var(--color);
          color: #fff;
          text-decoration: none;
          transition: left 200ms, background-color 200ms;
          
          &::before {
            position: absolute;
            left: -20px;
            bottom: 10px;
            width: 20px;
            height: 100%;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewY(45deg);
            transition: background-color 200ms;
          }
          &::after {
            position: absolute;
            left: -10px;
            top: -20px;
            width: 100%;
            height: 20px;
            content: "";
            background-color: color-mix(in srgb, var(--color), black 20%);
            transform: skewX(45deg);
            transition: background-color 200ms;
            z-index: -1;
          }
          &:hover {
            --color: #f00;
            left: -20px;
          }
        }
      }
    }
  }
</style>
<div class="container">
  <ul class="navlist">
    <li><a href="#">首頁</a></li>
    <li><a href="#">用戶管理</a></li>
    <li><a href="#">菜單管理</a></li>
    <li><a href="#">日志管理</a></li>
    <li><a href="#">權(quán)限管理</a></li>
  </ul>
</div>

3.總結(jié)

現(xiàn)代 CSS 賦予了現(xiàn)代開發(fā)者更多的能力，之前需要使用 JavaScript 來解決的業(yè)務(wù)需求，現(xiàn)在可以通過純 CSS 來實(shí)現(xiàn)了，這對(duì)開發(fā)者是一大利好。有句話能用CSS能實(shí)現(xiàn)的，盡量不要用 JavaScript 來實(shí)現(xiàn)。

SS3實(shí)現(xiàn)可展開收縮的彈性動(dòng)畫菜單，可以用在pc端和移動(dòng)端頁面。喜歡的朋友可以進(jìn)來看看！

效果圖：

未點(diǎn)擊菜單前

點(diǎn)擊菜單標(biāo)識(shí)后

點(diǎn)擊“菜單”圖標(biāo)后，導(dǎo)航文字會(huì)逐步顯示出來，然后菜單的標(biāo)識(shí)也會(huì)變回為交叉圖形

代碼展示：

html:

css:

在線咨詢

上一篇：純干貨，前端學(xué)者的福音！如何使用css濾鏡改變圖片顏色
下一篇：HTML教程（看完這篇就夠了）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商