当前位置: 首页 > Web前端 > CSS

React实现导航栏下划线跟随效果

时间:2023-03-31 13:27:59 CSS

效果图:App.jsximportReact,{Component}from'react'importstylefrom'./index.module.less'exportdefaultclassAppextendsComponent{state={width:0,left:0}enter=(event)=>{const{clientWidth,offsetLeft}=event.targetthis.setState({width:clientWidth,left:offsetLeft})}leave=()=>{this.setState(()=>({width:0}))}render(){const{width,left}=this.statereturn(<>首页导航一导航二导航三导航四

)}}App.module.less.header{位置:相对;左填充:50px;ul{显示:flex;保证金:0;填充:0;li{列表样式:无;填充:10px;游标:指针;字体粗细:500;&:hover{color:orangered}}}.line{position:absolute;底部:0;过渡:.3s立方贝塞尔曲线(.4,0,.2,1);背景色:#c7000b;}}