imooc|圣诞css

1.自适应rem布局

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。

recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

2.css3关键帧动画

Animation有八个属性

1. animation-name ：动画名
2. animation-duration：时间
3. animation-delay：延时
4. animation-iteration-count：次数
5. animation-direction：方向
6. animation-play-state：控制
7. animation-fill-mode：状态
8. animation-timing-function：关键帧变化

   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会平分这些段落值，其变化值就是:

1. background-position-x: -0px
2. background-position-x: -91px
3. background-position-x: -182px

transition是css3引入的”过渡”属性，可以让css的属性值在一定的时间区间内平滑地过渡，考虑兼容性问题，这里会额外引入一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现
接下来代码部分就非常简单了
transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受
参考右边的代码，让飞鸟执行一个飞的动作，可以这样用

$(".bird").transition({
    'right': "3rem",
}, 10000,'linear',function(){
    alert("结束")
});

3.3D变换：

要想实现3D的效果，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。
1.父元素或者当前运动元素上设置透视角perspective，perspective属性的值决定了3D效果的强度。
可以呈现3d的属性有，translate3d、scale3d、rotateX、rotateY、rotateZ等等
2.3D视图：设置在父元素上，子元素都可以相对于父元素的平面进行3D变形操作。

异步编程梳理：

setTimeout(function(){
	//任务一
	setTimeout(function(){
		//任务二
	},1000)
},1000)
var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调

观察者模式：
var observer = new Observer(); //创建对象
observer.subscribe(“任务名”,处理函数)
observer.publish(“任务名”）／／触发事件
observer.unsubscribe(“任务名”)

SVG概述
在之前的七夕主题中，在留言反馈中经常会有人说：”这个怎么又是图片，还以为是画出来的”。其实我很想说：靠人工是很难画的。当然基于七夕的优化，我在圣诞中还是特意引入的一部分svg与canvas来做一些图形操作。SVG是基于xml标记语言可缩放矢量图形，支持无损缩放的同时也因为是dom节点，所以也支持事件，但是弊端也很明显，dom的数量非常大，复杂度高，渲染就比较慢了，也不适合游戏的开发，一般会用canvas之后会介绍
SVG有什么优势？

• 文件体积小，能够被大量的压缩
• 图片可无限放大而不失真(矢量图的基本特征)
• 在视网膜显示屏上效果极佳
• 能够实现互动和滤镜效果

CANVAS概述
Canvas是html5的新标签，看起来很屌的样子其实理解了就不难。Canvas意为画布，简单的来说通过Canvas提供的一些接口方法在这个指定的画布中画出我们想要的图片与执行一系列的动作。

//第一步：获取canvas元素
   var cvs = document.getElementById('cvs'); //画布
    //第二步：获取上下文
   var ctx = cvs.getContext('2d'); // 画笔
   //第三步：指定绘制线样式、颜色
   ctx.strokeStyle = "red";
   //第四步：绘制矩形，只有线。内容是空的
   //ctx.strokeRect(10, 10, 190, 100);
   ctx.moveTo(50,50);
   ctx.lineTo(300,200);
   ctx.stroke();
   //以下演示填充矩形。

• 创建HTML页面，设置画布标签
• 编写js，获取画布dom对象
• 通过Canvas标签的Dom对象获取上下文
• 设置绘制线样式、颜色
• 绘制矩形，或者填充矩形

代码封装：
设计3个独立的JS文件分别是page-a.js、page-b.js、page-c.js，分别对应了3个场景类，把每一个场景的内容封装到每一个场景类中
然后在三个场景类之间通过接口去调用，比如切换页面，所以需要创建一个”中介”对象(christmas.js)充当，接口分配任务。

在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放.

var audio = new Audio(url);   //创建一个音频对象并传入地址
audio.loop  = loop ||  false; //是否循环
audio.play(); //开始播放

传递一个视频的地址，创建一个Audio对象，设置属性loop是否循环播放，然后调用play方法就可以实现播放了.

在代码的编写上，我合并了next方法的处理，增加了Deferred异步的方法，让异步的代码可以有同步执行的逻辑，这样代码结构看起来会更清晰
在next方法中封装了Deferred是使用，所以可以连续调用
next().then().then().then()…….

3D开窗效果

在openWindow方法中，动态的通过JS对“门”增加对应的样式，从而执行动画。
this.$leftWin.addClass(“window-transition”).addClass(“hover”)
this.$rightWin.addClass(“window-transition”).addClass(“hover”)

window-transition:定义的一个transition过渡动画。
hover：定义了一个transform过渡动画执行的变换scale(0.95)rotateY(60deg)

.window-left.hover {

    transform-origin:left top;
    transform:scale(0.95,0.95);
    transform:rotateY(80deg);
    top:0.1rem;
    left: -0.25rem;
}