弹指之间，精彩多现：CSS打造多行文本的收起展开效果

前端

2023-08-24 06:15:12

多行文本的展开收起：让你的网页更灵动

在当今飞速发展的网络世界中，网页设计也日新月异，展现出令人惊叹的效果。其中，多行文本的展开收起功能如同一朵奇葩，在互联网舞台上盛放。它能使网页内容更加简洁美观，同时又保留丰富的信息。

原理浅析：动画赋予灵动

多行文本的展开收起功能本质上是一种动画效果。当用户触发特定事件（如鼠标悬停或点击按钮）时，文本会逐渐显露或隐藏。这种效果的实现离不开 CSS 中的动画属性，如 transition 和 animation ，以及其他技巧。

实现要点：掌控细节

在使用 CSS 实现多行文本的展开收起效果时，你需要特别注意以下几点：

确保文本初始隐藏： 通常使用 display: none; 属性来实现。
动画属性控制过程： 使用 transition 或 animation 属性设置动画持续时间、延迟时间、循环次数等参数。
伪类触发效果： 使用 :hover 或 :active 等伪类来触发动画效果。

实例详解：代码实战

接下来，我们将通过具体的实例演示如何使用 CSS 实现多行文本的展开收起效果。

实例一：transition 属性

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit.</p>
</div>

.text-container {
  height: 100px;
  overflow: hidden;
}

.text-container:hover p {
  transition: height 1s ease-in-out;
  height: auto;
}

在这个实例中，我们使用 transition 属性让文本在鼠标悬停时逐渐显露，高度自动调整至文本自然高度。

实例二：animation 属性

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit. Sed eget lacus eget nunc luctus blandit.</p>
</div>

.text-container {
  height: 100px;
  overflow: hidden;
}

.text-container:hover p {
  animation: expand 1s ease-in-out;
}

@keyframes expand {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}