page contents

WEB前端教程:制作一个简单的手风琴效果导航

通过 JavaScript 触发过渡效果,理解语义化,合理地使用 HTML 标签来构建页面

attachments-2022-10-x4dbMUUD6350c0f1753f9.png课程目标

  • 熟悉 CSS3 过渡子属性
  • 通过 JavaScript 触发过渡效果
  • 理解语义化,合理地使用 HTML 标签来构建页面

阅读

编码

通过 CSS transition 实现该效果视频 demo (opens new window)

  • 鼠标悬浮到指定导航条上,导航条就缓慢撑开,出现视频 demo 所示的动画效果
  • 学有余力的同学可以研究一下,如何通过修改贝塞尔曲线,让这个动效更贴近自然

要求

  • CSS transition 的各项子属性(时间曲线)等详细值可以自由定义
  • 注意浏览器中的兼容性
  • HTML 及 CSS 代码结构清晰、规范
  • 代码中含有必要的注释

← CSS 雪碧图      绘制一个雷达图 


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等

attachments-2022-10-AupRIJ2J6350c05edf4c6.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1470 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1470 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章