最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3+HTML5+JS实现一个块的收缩与展开动画效果代码示例
时间：2022-06-25 14:01:53 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下CSS3+HTML5+JS实现一个块的收缩与展开动画效果代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
简单的一个效果图
实现思路
大体上我们将列表块分割成标题块和内容块
（1）标题块：展示标题和一个带有收缩&展开动画效果的图标
①图标部分，我们可以使用伪类来绘画出箭头，并且使用transform的旋转属性rotate进行图标的方向控制和其动画效果。
②动画控制，通常点击标题部分，列表则收缩&展开，因此点击标题时，要对class进行控制。
（2）内容块：内容块展示内容，且该块承载了主要的动画效果——列表的收缩&展开
①动画效果：该块的动画，我们的思路是整个块的高度收起来，里面的内容也向左边隐藏，因此需要控制高度和动画的隐藏，所以使用max-height进行高度控制和transition(设置动画时间)、transform 的属性translate来进行内容的隐藏
完整代码如下：
css;">
章节名称
节名称一
节名称二
节名称三
节名称四
节名称五
节名称六
节名称七
节名称八
节名称九
节名称十
以上代码直接复制到HTML文件保存后即可看到效果。此动画效果适应移动端，PC端会有点瑕疵，稍微处理即可。
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22