慕课网

H5+JS+CSS3 实现圣诞情缘

最热最新

qq_鸥子风人_03431114

//通过$.Deferred()处理过的代码,很明显没有了回调的嵌套,每一部分代码都被封装起来了,只留下Deferred的接口处理了. //这样写的好处是,如果我们以后写嵌套函数,就可以用Deferred的管道风格来编写同步代码了 /* 步骤有三步: * 第一步: var dtd = $.Deferred(); //创建 * 第二步: dtd.resolve(参数); //成功所得值,即为参数 * 第三步: dtd.then(); //执行回调,并将dtd作为实参传入then里面的函数; * */

查看全部

0 采集收起来源：异步编程梳理
2016-09-21
qq_鸥子风人_03431114 01:59

start to learn

查看全部

0 采集收起来源：编程思路
2016-09-18
Sissy

var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调具体的我们可以参考下jQuery的Deferred部分的API说明

查看全部

0 采集收起来源：异步编程梳理
2016-09-13
晨光搁浅42

rem布局

查看全部

0 采集收起来源：自适应rem布局
2016-08-21
xu_1394751074

123

查看全部

0 采集收起来源：自适应雪碧图
2016-07-14
安心坚持3217180 00:49

js，圣诞节视频

查看全部

0 采集收起来源：课程简介
2016-07-03
tlx6550

总结：呈现3d效果需要3部分 设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度 3D视图，设置在父元素上，子元素都可以相对与父元素的平面进行3d变形操作 3D变形函数，translate3d、scale3d、rotateX、rotateY、rotateZ等等

查看全部

0 采集收起来源：3D变换的梳理
2018-03-22
tlx6550

自适应布局单位如果使用【 em 或 rem 单位】进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是【相对父级元素的原因】没有得到推广。根据分辨率自动调整浏览器默认字体大小【rem是相对于根元素html的font-size进行计算的】 var docEl = document.documentElement, //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize =20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false)

查看全部

0 采集收起来源：自适应rem布局
2018-03-22
兰亭大侠 02:09

545

查看全部

0 采集收起来源：编程思路
2016-06-26
兰亭大侠 01:41

asdf

查看全部

0 采集收起来源：编程思路
2016-06-26
兰亭大侠 01:13

132

查看全部

0 采集收起来源：编程思路
2016-06-26
兰亭大侠 00:51

123

查看全部

0 采集收起来源：编程思路
2016-06-26
qq_不知道叫什么_03383387

@-webkit-keyframes bird-slow { 0% { background-position: -0px 0px; } 100% { background-position: -273px 0px; } } @-moz-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% { background-position: 0px 0px; } 75% { background-position: -91px 0px; } 100% { background-position: -182px 0px; } }

查看全部

0 采集收起来源：关键帧动画
2016-06-13
慕仙8268269

如果实现3张图帧动画效果，代码如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通过定义一个类，类中定义的动画的一些关键数据，比如动画名，时间，次数，切换的位置通过keyframes定义动画具体执行参数与时间段 steps(3)的意思就是：keyframes设置的0%-100%的段中，background-position的的x坐标会变化3次 steps会平分这些段落值，其变化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px 为什么没有-273px，这个是steps的具体一个算法

查看全部

0 采集收起来源：关键帧动画
2016-06-06
慕仙8268269

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-06-06

首页上一页 5 6 7 8 9 10 11 下一页尾页

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