引言:

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

一、效果图:

css设置下划线代码(常见的几种css下划线动画)(1)

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>

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

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

,