CSS 打造的动感折叠标题，快跟上！

2024-01-30 18:24:35

当网页中包含大量信息时，折叠标题可帮助用户快速了解这些信息，而不会感到不知所措。将重要信息折叠在一个可单击的标题中，直到用户希望查看更多详细信息时再展开它，从而保持页面整洁。

要使用 CSS 创建折叠标题，只需执行以下几个步骤：

创建一个标题元素并为其添加一个类名，如“折叠标题”。
为折叠标题添加样式，包括设置其高度、宽度和边框。
添加一个带有背景图像的伪元素，并将其定位在折叠标题的顶部。
为折叠标题添加一个带有箭头图标的伪元素，并将其定位在折叠标题的右侧。
将折叠标题的文本内容隐藏起来，并在用户将鼠标悬停在折叠标题上时显示出来。

下面是一个示例代码，演示如何使用 CSS 创建一个简单的折叠

<div class="折叠标题">
  <h1>折叠标题</h1>
  <div class="内容">
    <p>这是一个折叠标题的内容。这是一个折叠标题的内容。这是一个折叠标题的内容。这是一个折叠标题的内容。这是一个折叠标题的内容。</p>
  </div>
</div>

.折叠标题 {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  position: relative;
}

.折叠标题::before {
  content: "";
  background-image: url("背景图像.jpg");
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.折叠标题::after {
  content: ">";
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.折叠标题:hover .内容 {
  display: block;
}