纯CSS导航栏下划线滑动效果
问题描述
面向 C 端的产品嘛，总有一些动效想要提高用户体验，以下是用纯 css 实现导航栏选中下划线滑动效果
解决方案
以下是实现效果：
主要代码如下：
<template><section id="J_list_wrapper" class="list-wrapper"><nav class="nav-bar-wrapper"><p class="nav-bar-item"v-for="(item,index) in navBarData":class="item.selected?'selected':''"@click="navItemClick(index)">{{item.text}}<i class="red-point"></i></p></nav></section></template><style>.nav-bar-wrapper {display: flex;height: 88px;padding: 0 40px;justify-content: space-between;align-items: center;background-color: #ffffff;.nav-bar-item {line-height: 88px;font-size: 32px;color: #999999;position: relative;//transition: color ease-in-out 0.2s;&::before {content: "";position: absolute;bottom: 9px;left: 100%;width: 0%;height: 6px;background-color: #FF680A;border-radius: 999px;transition: all ease-in-out 0.4s;}//&::after {// content: "";// position: absolute;// bottom: 9px;// left: 0;// width: 100%;// height: 6px;// background-color: #ffffff;//}&.selected {color: #FF680A;font-weight: bold;&::before {width: 100%;left: 0;}//&::after {//width: 100%;//left: 0;//display: none;//}& ~ .nav-bar-item::before {left: 0;}}.red-point {display: block;width: 26px;height: 26px;background-color: #f43000;position: absolute;border-radius: 50%;border: 2px solid #ffffff;box-sizing: border-box;top: 14px;right: -16px;transform: scale(.5);}}}</style><script>export default {data () {return {navBarData: [{text: '申请售后',pointFlag: false,selected: true,}, {text: '售后中',pointFlag: false,selected: false,}, {text: '售后记录',pointFlag: false,selected: false,},]}}}</script>
如果不想要消失的时候滑动条渐变消失，直接把注释的伪元素 after 打开即可，效果如下：
