如何通过HTML+CSS实现文字折叠特效

效果

实现

1. 定义标签

2. 设置文字基本样式

3. 鼠标经过文字显示内陷效果

4. 用双伪类实现文字的上半部分

5. 鼠标经过文字上半部分文字折叠

6. 异曲同工，设置下半部分

代码展示