html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态

本次主要是联系css实现导航栏下划线跟随效果

HTML：

js：主要是为了刷新页面，让第一个li默认有下划线和选中效果

css：

/*下划线跟随*/

ul{

display: flex;

position: initial;

}

li{

position: relative;

padding: 1em 2em;

font-size: 12px;

list-style: none;

white-space:nowrap;

width: 25%;

text-align: center;

}

li.current_li{

list-style-type:none;

border-bottom:2px solid red;

padding-bottom: 2px;

}

a:active, a:hover, a.current {

color: #ff231c;

}

li::after{

content: '';

position: absolute;

bottom: 0;

width: 0;

height: 2px;

color: #ff231c;

background-color: #ff231c;

transition: .5s all linear;

}

li:hover::after{

width: 100%;

}

li::after{

left: 100%; /*选中项上一个下划线收回的方向，从左往右收线*/

}

li:hover::after{

left: 0; /*选中项下划线出线的方向，从左往右出线*/

}

li:hover ~ li::after {

left: 0; /*选中项下一个下划线出线的方向，从左往右收线*/

}

html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态相关推荐

css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: <ul id="list"><li class="current_li">&l ...
纯CSS导航栏下划线跟随效果
参考文章 <ul><li>111</li><li>2222</li><li>3333333</li><li&g ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...
水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...

html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态

html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态相关推荐

最新文章

热门文章