css动画效果代码淡入淡出折叠展开点击悬浮

在CSS中，可以使用transition属性来实现淡入淡出的效果，并使用:hover伪类来实现悬浮时的折叠展开效果。以下是一个简单的例子：

HTML:

<div class="container">
  <div class="content">
    <p>这里是内容</p>
  </div>
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
 
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f0f0f0;
  transition: transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
.container:hover .content {
  transform: translateY(0);
}

在这个例子中，.container 是包含折叠内容的容器，.content 是要折叠的内容区域。通过设置.content的transform属性为translateY(100%)，初始时内容位于容器外部，不可见。当鼠标悬浮在.container上时，.content通过transform的过渡效果平滑地下滑至初始位置，实现了淡入的效果。

当鼠标从悬浮区域移出时，内容会再次上升回原来的位置，实现了淡出的效果。这个效果是通过.content的transition属性定义的，当transform属性改变时，会在0.5秒内完成过渡动画。