css展开隐藏动画 |css 左右滚动图片

// HTML代码
<div class="box">
<h3>点击展开</h3>
<p>这是要展开的内容</p>
</div>
// CSS代码
.box {
height: 50px;
overflow: hidden;
transition: height .3s ease;
}
.box.open {
height: 150px;
}
.box h3 {
cursor: pointer;
}

上述代码中，首先定义了一个包含展开内容和展开按钮的box容器，并设置了一个高度和overflow:hidden属性，这样就可以隐藏其中的内容。

然后使用CSS3的transition属性设置box容器的高度变化为0.3秒，并使用ease缓动函数使过渡更加平滑自然。当.box元素的class属性为open时，其高度将变为150px，从而展开其中的内容。

为了更好的交互体验，这里还使用了cursor属性为展开头部添加指针，让用户可以清楚的明白该区域可以被点击展开。

此外，在实现过程中还可以根据实际需求添加其他特效效果，例如增加角度、透明度、位移等属性值，就可以制作出更为生动的展开和隐藏动画效果。