慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

超轶主

step函数，它可以传入2个参数，第一个是大于零的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数显示效果。第二个参数设置后和step-start，step-end同义，在凤城的小间隔动画中判断显示，可以看出：step-start等于steps（1，start）， steps（1，end）等于step-end timing-function作用于每两个关键帧之间，不是整个动画

查看全部

1 采集收起来源：关键帧动画
2016-12-29
超轶主

animation-iteration-count 属性定义动画播放次数

查看全部

1 采集收起来源：关键帧动画
2016-12-29
刘健lj

父级 perspective 子级 transform-style:preserve-3d(轴) 孙元素 transform: rotateY(120deg) 倾斜角度 translateZ(2.5rem) 透视距离 scaleY(.9) rotateY与 rotate的区别

查看全部

0 采集收起来源：3D旋转特效(中)
2016-12-29
超轶主

DOMContentLoaded事件：页面文档完全加载并解析完毕后，会触发DOMContentLoaded事件，HTML文档不会等待样式文件，图片文件，子框架文件的加载

查看全部

0 采集收起来源：自适应rem布局
2016-12-29
超轶主

resize：调整浏览器窗口大小触发resize事件

查看全部

0 采集收起来源：自适应rem布局
2016-12-29
超轶主

orientationchange事件是用户水平或者垂直翻转设备时触发的事件，例子：$(window).on("orientationchange",function(){ alert("方向已经改变") })

查看全部

0 采集收起来源：自适应rem布局
2018-03-22
超轶主

rem和em一样都是相对单位，不同的是em是相对于元素的父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算，这样rem就绕开了复杂的层级关系，浏览器默认字体大小是16px，按照转换关系，16px=1rem

查看全部

0 采集收起来源：自适应rem布局
2016-12-29
徐若兮

修改background-size和background-position的值即可

查看全部

0 采集收起来源：自适应雪碧图
2016-12-27
徐若兮

1. z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 2.-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 3.firefox浏览器不支持background-position-x，使用background-position ok

查看全部

1 采集收起来源：关键帧动画
2016-12-27
刘健lj

默认情况下浏览器的字体大小为16px，16px=1rem。20*(docEl.clientWidth / 320)意思是获取当前屏幕宽度除以16（20/320）得到的是字体放大或缩小的倍率。当你改变20或320时实质改变的是字体的放大倍率两者的比值越小字体放大的倍率越大反之亦然

查看全部

0 采集收起来源：自适应rem布局
2016-12-22
_linn

关键帧动画： CSS3的Animation有八个属性 animation-name ：动画名 animation-duration：时间 animation-delay：延时 animation-iteration-count：次数 animation-direction：方向 animation-play-state：控制 animation-fill-mode：状态 animation-timing-function：关键帧变化 8个属性中，其中1-7都有相关介绍，但是animation-timing-function是控制时间的属性，在取值中除了常用到的三次贝塞尔曲线以外，还有个很高级的 steps() 函数，steps函数也就是整个圣诞主题的关键知识点。steps要配合精灵图使用，简单来说就是用来切换多个精灵图的，形成帧动画，类似setTimeout的处理感觉

查看全部

0 采集收起来源：关键帧动画
2016-12-22
_linn

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem. 自适应处理：使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果

查看全部

0 采集收起来源：自适应rem布局
2016-12-22
_linn

精灵动画部分依旧采用大量的 CSS3 animation动画的steps关键帧，但是不同的是，解决了自适应雪碧图的问题元素运动部分优化了CSS3过渡与变换的使用新增了video视频元素的使用新增了3d旋转木马的效果实现新增了canvas版的雪花实现

查看全部

0 采集收起来源：编程思路
2016-12-22
_linn

采用新的rem布局代替百分比布局方案采用简单的面向对象编程类的形式对每一个页面场景元素都做了一定的封装引入了观察者模式的处理机制引入了svg概念，通过svg绘制矢量图

查看全部

0 采集收起来源：编程思路
2016-12-22
刘健lj

在设置一个容器的transform-style:preserve-3d;只影响这个元素的子元素。（子元素） perspective：100px;应该就是z轴的距离，眼睛距屏幕的距离。（父元素）

查看全部

0 采集收起来源：3D变换的梳理
2017-01-06

首页上一页 2 3 4 5 6 7 8 下一页尾页

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画图