知识点
- transtion
- 伪类
核心
这个动效的难点是，需要点击后下划线从中间开始延伸。
一开始咋一看可能想不到，但是我们只需要将动画分解一下。
- 从中间开始
- 向右
- 向左
从中间开始和向右（向左）可以合成一步。
text::after{
left: 50%; /*从中点开始*/
width: 0; /*初始状态*/
transition: all 0.3s;
}
text.active::after{
width: 100% ; /*开始动画*/
}
这样就完成了单向向右移动，这时只需要再让它同时向左移动就完成了。
left: 0;
