css点击显示隐藏过渡

CSS是一种可以控制HTML文档外观和整体布局的样式表语言，而其中一个非常常见也实用的特性就是点击显示和隐藏过渡效果。这个特性通过CSS的:target 伪类和 transition 过渡属性来实现。

首先，我们需要先通过HTML创建需要隐藏的内容和触发隐藏和显示的按钮，如下所示：

<div class="content" id="content">
  <p>要隐藏和显示的内容</p>
</div>
<button id="toggle">显示/隐藏</button> 

注意，这里我们使用了一个id为'toggle'的按钮来触发内容的显示和隐藏。这个按钮可以放在任何想要放置的位置。

接下来，我们可以使用CSS将内容隐藏起来：

#content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
 

这里我们使用了max-height和overflow属性，将内容隐藏。同时，我们设置了一个0.5秒的过渡效果，让隐藏和显示更加平滑。

接下来添加一个:target伪类，当按钮被点击时，我们可以使用过渡让内容平滑显示出来：

#content:target {
  max-height: 200px;
 /* 你需要显示的高度 */
  transition: max-height 0.5s ease-in-out;
}
 

注意，我们在伪类后添加了:hover样式属性，这是因为当按钮被点击并触发后，:target伪类将一直保持，无法通过再次点击按钮来隐藏内容。添加:hover样式属性可以让按钮再次被点击并触发伪类的失效，从而隐藏内容。

现在，每当按钮被点击，内容将以过渡的方式平滑的显示和隐藏。如果你希望内容在一开始就显示出来，只需将按钮的id改为content即可。