运用CSS3动画制作手风琴

开发工具与关键技术：  vacode css3动画

作者：唐嘉怡

撰写时间：2022/3/10

我们所学的css3动画可以用来构成许多网页里有趣的动态图像，这些有趣的设计会吸引更多的用户，并且css3动画也可以使网页更加整洁，让人赏心悦目。下面运用的css3动画所制作的手风琴菜单来感受以下css3动画的神奇吧。

首先，我们要在桌面上先创建一个新的文件夹用来装载我们所需的代码

点击新建，选择文件夹。

 用vs软件打开该文件夹，并创建一个HTML页面

先给body一个div盒子，命名为menu，在该盒子的基础上，接着再给一个div盒子，命名为item。以下为示例

1.  接着，在item盒子里放一个h3标签，内容自定义，（本作者写的是市内热讯），接着，在h3标签下添加一个div盒子，命名为itemBox。

1. 接着，在itemBox盒子里添加一个无序列表，如下图

1. 接着再嵌套几个无序列表，用来撑开菜单

1. 之后我们来给主干设置样式与添加动画。

这样一个手风琴菜单便完成了，成效如何就自己尝试一下吧。

这是我所学到的css3动画的运用，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！