为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
H5+JS+CSS3 实现圣诞情缘_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

H5+JS+CSS3 实现圣诞情缘

Aaron艾伦 Web前端工程师
难度中级
时长 2小时33分
  • 为什么walk()里已经创建了dfd,unwrapp()里还要创建dfd?还有怎么知道哪些方法需要异步哪些又不需要?
    查看全部
  • 16px = 1rem
    查看全部
    0 采集 收起 来源:自适应rem布局

    2017-12-20

  • 呈现3d效果需要3部分 父元素或者当前运动元素上设置透视角perspective,perspective属性的值决定了3D效果的强度 3D视图,设置在父元素上,子元素都可以相对与父元素的平面进行3d变形操作 3D变形函数,translate3d、scale3d、rotateX、rotateY、rotateZ等等
    查看全部
    0 采集 收起 来源:3D变换的梳理

    2017-10-26

  • 1.圣诞采用rem布局,rem相对于html的font-size做参考;
    查看全部
    0 采集 收起 来源:自适应rem布局

    2017-09-08

  • CSS3的Animation有八个属性 animation-name :动画名 animation-duration:时间 animation-delay:延时 animation-iteration-count:次数 animation-direction:方向 animation-play-state:控制 animation-fill-mode:状态 animation-timing-function:关键帧变化
    查看全部
    0 采集 收起 来源:关键帧动画

    2017-07-19

  • 采用新的rem布局代替百分比布局方案 采用简单的面向对象编程 类的形式对每一个页面场景元素都做了一定的封装 引入了观察者模式的处理机制 引入了svg概念,通过svg绘制矢量图 精灵动画部分依旧采用大量的 CSS3 animation动画的steps关键帧,但是不同的是,解决了自适应雪碧图的问题 元素运动部分优化了CSS3过渡与变换的使用 新增了video视频元素的使用 新增了3d旋转木马的效果实现 新增了canvas版的雪花实现 编程思路: 1.rem的布局 2.帧动画的原理 3.面向对象的编程 4..设计模式和异步代码梳理 5.canvas绘图、svg绘图 6.精灵动画的实现及如何营造3d效果 技术分解点 如何做rem布局 帧动画的原理 如何营造3d效果 设计模式和异步代码梳理 canvas绘图 svg绘图
    查看全部
    0 采集 收起 来源:编程思路

    2017-07-04

  • animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} }
    查看全部
    0 采集 收起 来源:关键帧动画

    2017-06-22

  • 自定义浏览器默认字体大小: docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 给html设置fontSize大小,其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小,从而调整rem的比值关系。
    查看全部
    0 采集 收起 来源:自适应rem布局

    2017-06-01

  • 用关键帧可以实现精灵图的切换,同时通过background-size解决了自适应的问题,
    查看全部
    0 采集 收起 来源:元素运动实现

    2017-05-22

  • 运动 = 关键帧动画 + 坐标变化 1.元素.position定位,修改top,left坐标修改 2.通过css3的transform属性的translate
    查看全部
    0 采集 收起 来源:元素运动实现

    2017-05-22

  • 所有的技术点
    查看全部
    0 采集 收起 来源:编程思路

    2017-05-04

  • 参考右边代码区域,一般情况在项目的最前面加载一段js来修改html的font-size,针对不同分辨率计算font-size,监听浏览器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    查看全部
    0 采集 收起 来源:自适应rem布局

    2017-04-26

  • 飞鸟代码
    查看全部
    0 采集 收起 来源:元素运动实现

    2017-04-20

  • animation-name :动画名 animation-duration:时间 animation-delay:延时 animation-iteration-count:次数 animation-direction:方向 animation-play-state:控制 animation-fill-mode:状态 animation-timing-function:关键帧变化
    查看全部
    0 采集 收起 来源:关键帧动画

    2017-04-19

  • 技术点分解
    查看全部
    0 采集 收起 来源:编程思路

    2017-03-17

举报

0/150
提交
取消
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想 5、SVG基础知识 6、Canvas基础知识
老师告诉你能学到什么?
1、rem式布局 2、转场特效 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果 7、H5的视频效果 8、SVG画图 9、canvas画图
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!