For left and right cubic-bezier, if it goes left, left will be fast first and then slow, right will be slow first and then fast; if it is right, left will be slow first and then fast, right will be fast first and then slow
I solved it myself, using transition, the border-bottom is displayed when each item is selected, and then a bottom-bar is added and the most common movement is used to achieve that effect. No difficult styles are required.
Analyze the document structure: The orange bar at the bottom is an independent p and is absolutely positioned relative to the parent element Determine the right of the orange bar through the click event Value, dynamically modified using js. Secondly add the transition attribute to the p to achieve the desired effect
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For left and right cubic-bezier, if it goes left, left will be fast first and then slow, right will be slow first and then fast; if it is right, left will be slow first and then fast, right will be fast first and then slow
Animation effect achieved by css3 transition
I solved it myself, using transition, the border-bottom is displayed when each item is selected, and then a bottom-bar is added and the most common movement is used to achieve that effect. No difficult styles are required.
Analyze the document structure:
The orange bar at the bottom is an independent p and is absolutely positioned relative to the parent element
Determine the right of the orange bar through the click event Value, dynamically modified using js.
Secondly add the transition attribute to the p to achieve the desired effect