小姐姐直播课第二更:时尚优雅的菜单切换效果

妙味周三直播课:

18年12月19日,晚 8 点

《时尚优雅的菜单切换效果》

免费报名地址:

https://ke.qq.com/course/178139


前置知识点

CSS3 部分:

  • transition
  • 线性渐变 linear-gradient
  • 结构选择器

移动端页面布局:

  • rem
  • viewport
  • 移动端常见兼容问题

JavaScript 基础:

  • 循环、逻辑判断、自定义属性、索引值、属性操作
  • 移动端事件:touchstart、touchmove、touchend
  • 绑定事件:addEventListener

注意:

  • 前置视频非常重要!!!如果没有前端视频的小伙伴,请在下面留言,然后 找客服索要即可,如:

本节课知识点

  • CSS3:

    1. border-radius
    2. 属性值一个角对应两个值,分别xy
    3. transform
    4. translateZscalerotateY
    5. perspective
    6. 近大远小 透视视角
    7. transform-style
    8. 保留子级变化效果
    9. transform-origin 变换原点
    10. 位移不会改变原点位置
  • 事件:

    1. transitionend
    2. 运动完成时触发,注意:会引起多次触发
  • JavaScript 动画

    1. 数值类型的值,才会引起动画过渡

实现思路

本案例主要分为两个部分:
导航和展示,展示页面遮盖导航页面

点击展示页面按钮,展示页面向侧边偏移,展示出导航

导航的点击触发展示部分的变化
点击其他栏目,被点击栏目对应页面,旋转进入屏幕
点击栏目不改变,页面只执行进入屏幕动画

课后拓展作业:

  • 除了点击事件外,增加滑动触发的效果,当手指向右滑动,显示导航页面
  • 利用自定义滚动条,使显示页面可以进行上下内容滑动

特别提醒:

1、如有相关技术问题,欢迎留言提问,我们会认真回复每一条留言滴,如:

2、如果,你有事错过了 “周三直播课之夜”,错过了直播现场最宝贵的 “精彩互动”,贴心的小编也为你准备了 “回放视频及源码课件” ,你只需要在本帖下留言,就能找妙味的客服小姐姐去要啦~

注:资料整理需要几天时间,所以想要第一时间学习的小伙伴们,最好还是来参加直播课吧~

免费报名地址:

https://ke.qq.com/course/178139



本课知识点来源于:

《2019 新番:JS 全栈高级工程师课程》

精彩课程介绍:
https://www.miaov.com/index.php/news/newsDetail/nid/386


课程咨询:

  • 咨询 QQ:2852509866、2852509868
  • 微信咨询:miaov-class、miaov-study
妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部