WEB前端教程：制作一个简单的手风琴效果导航
通过 JavaScript 触发过渡效果，理解语义化，合理地使用 HTML 标签来构建页面
课程目标
- 熟悉 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 代码结构清晰、规范
- 代码中含有必要的注释
← CSS 雪碧图 绘制一个雷达图 →
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-20 11:31
- 阅读 ( 622 )
- 分类：WEB前端开发
