CSS3+HTML5+JS实现一个块的收缩与展开动画效果代码示例

时间：2022-06-25 14:01:53 编辑：袖梨来源：一聚教程网

本篇文章小编给大家分享一下CSS3+HTML5+JS实现一个块的收缩与展开动画效果代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

简单的一个效果图

实现思路

大体上我们将列表块分割成标题块和内容块

（1）标题块：展示标题和一个带有收缩&展开动画效果的图标

①图标部分，我们可以使用伪类来绘画出箭头，并且使用transform的旋转属性rotate进行图标的方向控制和其动画效果。

②动画控制，通常点击标题部分，列表则收缩&展开，因此点击标题时，要对class进行控制。

（2）内容块：内容块展示内容，且该块承载了主要的动画效果——列表的收缩&展开

①动画效果：该块的动画，我们的思路是整个块的高度收起来，里面的内容也向左边隐藏，因此需要控制高度和动画的隐藏，所以使用max-height进行高度控制和transition(设置动画时间)、transform 的属性translate来进行内容的隐藏

完整代码如下：

以上代码直接复制到HTML文件保存后即可看到效果。此动画效果适应移动端，PC端会有点瑕疵，稍微处理即可。

推荐专题

最新下载

热门教程

CSS3+HTML5+JS实现一个块的收缩与展开动画效果代码示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程