常见的几种css下划线动画

言：

导航栏下划线动画在网页设计中是非常常见的交互，下面将介绍几种非常常见，非常nice的动画特效，废话不多说直接上演示和代码。

一、效果图：

css下划线

二、源码如下：

<body>
		<p>样式1</p>
		<ul id="demo1">
			<li>首页</li>
			<li>产品</li>
			<li>服务</li>
			<li>关于</li>
		</ul>
		
		<p>样式2</p>
		<ul id="demo2">
			<li>首页</li>
			<li>产品</li>
			<li>服务</li>
			<li>关于</li>
		</ul>
		
		<p>样式3</p>
		<ul id="demo3">
			<li>首页</li>
			<li>产品</li>
			<li>服务</li>
			<li>关于</li>
		</ul>
		
		<p>样式4</p>
		<ul id="demo4">
			<li>首页</li>
			<li>产品</li>
			<li>服务</li>
			<li>关于</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>

如果对你有所帮助，点赞+收藏 再走

向上的路并不拥挤，而大多数人选择了安逸

着现代 CSS 技术的发展，CSS 新特性被越来越多的浏览器所支持，本文主要讲述使用纯 CSS 实现3D导航栏的步骤，并对其中用到的关键样式做一个解析。

1.整体效果

2.实现方案

实现方案将从一个基础的样式写起，然后逐渐添加响应的伪元素来实现不同的边，实现3D效果。与此同时，实现的过程中还给导航设置了动画，方便鼠标 hover 的时候有个更好地用户体验。

2.1.基础框架编写

小懒首先通过 html:5 快速创建 html5 页面基础框架，然后通过 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速创建导航 html 框架。同时给基础框架增加了基础样式，样式中我们使用了现代 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="#">权限管理</a></li>
  </ul>
</div>

效果如下：

2.2.3D效果实现

为了实现 3D 效果，需要旋转对各面做倾斜变化，正面需要Y轴倾斜 -15deg，侧面需要Y轴倾斜 45deg，顶面需要X倾斜 45deg。侧面和顶面我们使用 CSS 伪元素 ::before 和 ::after 来实现。在CSS 实现中背景颜色我们使用 color-mix 颜色混合函数来自动计算背景颜色。

// 正面
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效果已经实现，但是顶面和正面的层级还是有点问题，以至于效果看着比较别扭，我们再整体调试一节中将调试细节。请注意：color-mix 函数虽然得到大多数现代浏览器的支持，但是在生成环境中请谨慎使用。

2.3.整体调试

1）首先对导航的各项做了层级定义：

& 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;
    }
  }
}

对顶面的伪元素设置层级

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

给各面定义动画

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

4）整体实现代码

<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="#">权限管理</a></li>
  </ul>
</div>

3.总结

现代 CSS 赋予了现代开发者更多的能力，之前需要使用 JavaScript 来解决的业务需求，现在可以通过纯 CSS 来实现了，这对开发者是一大利好。有句话能用CSS能实现的，尽量不要用 JavaScript 来实现。

SS3实现可展开收缩的弹性动画菜单，可以用在pc端和移动端页面。喜欢的朋友可以进来看看！

效果图：

未点击菜单前

点击菜单标识后

点击“菜单”图标后，导航文字会逐步显示出来，然后菜单的标识也会变回为交叉图形

代码展示：

html:

css:

在线咨询

上一篇：纯干货，前端学者的福音！如何使用css滤镜改变图片颜色
下一篇：HTML教程（看完这篇就够了）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商