最新下载
热门教程
- 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端会有点瑕疵，稍微处理即可。
相关文章
- 以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍 12-31
- 未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍 12-31
- 未定事件簿左然破浪远行怎么样 12-31
- 桃源深处有人家行医问诊怎么玩 12-31
- 恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍 12-31
- 阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍 12-31