QQforMac 浏览器器实战

一、滚滚屏

滚滚屏网站是时下非常流行行的个人站或者企业站的制作风格，这个本身就是一种流行行的趋势，这个类型的网站大量量运用css3中的动画模块技术，并且需要配合使用jquery。

特点：

• 每一屏都是铺满的 宽度和高度都是100%；
• 没有滚动条；
• 滚动效果需要第三方库的支持；
• 每一屏的元素都是定位实现的；一般都是居中定位，这个很重要;
• 所有的入场动画和出场动画都是依靠CSS3 实现的；

二、案例知识点

1.jQuery Mousewheel Plugin
用于添加跨浏览器器的鼠标滚轮支持;
mousewheel事件的处理理函数有一点小小的变化，它除了了第一个参数event 外，还接收到第二个参数delta;通过参数delta可以获取鼠标滚轮的方向和速度;
如果delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。
2.animation: scroll 1s infinite alternate
infinite 规定动画应该无限次播放
alternate 动画应该轮流反向播放
linear-gradient
线性渐变 默认 从上到下
3.语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
transform
在用CSS3做动画的时候，尽量量把各种动画属性写完整，以适应各种浏览器器的兼容问题
例例如：

0%{
transform:translateX(0px) translateY(10px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}
100%{
transform:translateX(0px) translateY(0px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}

perspective
定义 3D 元素距视图的距离，以像素计；
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不不是元素本身；
perspective 属性只影响 3D 转换元素。
效果是：近大远小
语法：
perspective: number|none;
backface-visibility
定义当元素不不面向屏幕时是否可见;
如果在旋转元素不不希望看到其背面时，该属性很有用。
在3D效果小才能显现
backface-visibility: visible|hidden;
transform-style
属性规定如何在 3D 空间中呈现被嵌套的元素
该属性必须与 transform 属性一同使用
语法：
transform-style: flat|preserve-3d;