# 制作一个简单的手风琴效果导航
# 课程目标
- 熟悉 CSS3 过渡子属性
- 通过 JavaScript 触发过渡效果
- 理解语义化，合理地使用 HTML 标签来构建页面
# 阅读
- CSS3 新特性兼容方法总结 (opens new window)
- CSS3 过渡
- Understanding CSS3 Transitions (opens new window)
- 动效落地方法 (opens new window)
- 优秀的 CSS 交互动效示例 (opens new window)
# 编码
通过 CSS transition 实现该效果视频 demo (opens new window) 。
- 鼠标悬浮到指定导航条上，导航条就缓慢撑开，出现视频 demo 所示的动画效果
- 学有余力的同学可以研究一下，如何通过修改贝塞尔曲线，让这个动效更贴近自然
# 要求
- CSS transition 的各项子属性（时间曲线）等详细值可以自由定义
- 注意浏览器中的兼容性
- HTML 及 CSS 代码结构清晰、规范
- 代码中含有必要的注释