一、滚滚屏
滚滚屏网站是时下非常流行行的个人站或者企业站的制作风格,这个本身就是一种流行行的趋势,这个类型的网站大量量运用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;