项目可以用<section>标签对不同部分进行划分；
对css进行初始化：cssreset.css
-
页面占满整个屏幕且不出现滚动条
html,body{ width: 100%; height: 100%; overflow: hidden; } -
依赖滚滚屏插件实现鼠标滚动做出相应：jquery.mousewheel.min.js
github: https://github.com/jquery/jquery-mousewheel
使用滚滚屏时，使用timeout进行节流 , 让最后一次滚动有效 ; 在pc端节流一般控制在500毫秒。
-
用法：
在监听屏幕滚动的时候，先清除定时器，再设置500毫秒的定时器； 滚动事件写在回调函数中
通过监听其上下滚动实现界面的界面
对不同界面的公共样式进行搭建，然后使用js对特别的样式进行划分
在界面样式搭建时，建议使用弹性布局。
-
css3动画
animation: myAnimate 1s infinite alternate linearmyAnimate 自定义动画 1s 动画所花费的时间 infinite 规定动画应该无限次播放 alternate 动画应该轮流反向播放 linear 动画的曲线（匀速） /*滚动的指示器*/ .scroll{ .... /*ccs3动画*/ animation: unAndDowm 0.65s infinite alternate; } /*实现自定义动画*/ @keyframes unAndDowm { 0%{transform:translateY(0px)} 100%{transform:translateY(10px)} } css3渐变色介绍
linear-gradient
线性渐变的方向 默认从上到下
-
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);direction ：渐变开始的角度, 默认是180deg color-stop1 ： 渐变的过渡的颜色 （ 可以写多个，还可以在其后添加百分比 ）
-
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：(用逗号隔开)- background-color - background-position : center -60px - background-size - background-repeat - background-origin - background-clip - background-attachment - background-image -
绝对定位时，使其居中显示的做法：
width:200px; height:200px; left:50%; top:50%; margin-left:-100px; margin-top:-100px; 微调技巧
-
声明当前文件的编码格式
/*声明当前文件的编码格式*/ @charset "UTF-8"; -
设计联调
在浏览器的F12后，在source界面，右击鼠标，弹出创建文件夹到工作空间； 选中项目中的css文件夹, 点击确认后会弹出一个是否允许的权限提示，点击允许； 选中要关联的文件，查看你编码是否正确。 右键选择map将其映射到网络中。按回车键即可。 映射成功后，只要在浏览器上调试的都会相应的修改在编辑器中。
- 透视介绍
一旦在父标签设计透视，子标签就会有透视效果
-
设置
perspective：80px; -webkit-perspective:80px;
-
使用css3动画时的初始化模板
transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
- 注意：平移的单位是px,旋转的单位是deg,放大的默认值是1
- 面向和背向效果
效果：图片面向前，可见； 背向，不可见
-
backface-visibility : visible | hidden;
- 设计标签背向时是否可见 ; - 如果在旋转元素不希望看到其背面时，该属性很有用。 - **父标签在3D效果下能显现** -
父标签添加3D效果： transform-style
- 属性规定如何在 3D 空间中呈现被嵌套的元素 - 该属性必须与 transform 属性一同使用- 语法：transform-style: flat|preserve-3d;
- 给界面添加落空效果：通过添加落空类current
-
界面一进来就默认放大
section.p2.current .p2_main, section.p2.current .p2_title{ transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(4) scaleY(4) scaleZ(4); } -
记得加上动画过渡效果：
.p2 .p2_main, .p2 .p2_title{ transition: all 1s linear; } -
使用一次性定时器50ms，使落空的效果更加明显。
通过js删除选中的界面的落空类，添加其他没有选中的界面的落空类，
使得再次切换的时候该落空类依然存在。function toggleCurrent() { setTimeout(function () { $('section').eq(index).removeClass('current').siblings('section').addClass('current'); },50); } 点击和滚动屏幕的时候都应该有落空类
-
公转和自转
- 公转的速度比自转慢，且公转是父亲li在转，自转是儿子img本身在转，都是围绕z轴转过360度。 - 添加动画animation即可实现 要在Z层分层，就要在其父元素上设置3d效果；
background-size
background-size: length | percentage | cover | contain;
*length*
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
*percentage*
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
-
transform-origin 属性(样式的坐标点)
transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。默认值： 50% 50% 0
继承性： no
版本： CSS3
JavaScript 语法： object.style.transformOrigin="20% 40%"
transform-origin: x-axis y-axis z-axis;
-
x-axis
定义视图被置于 X 轴的何处。可能的值： left center right length % -
y-axis
定义视图被置于 Y 轴的何处。可能的值： top center bottom length % -
z-axis
定义视图被置于 Z 轴的何处。可能的值： length
- 从四面八方过来
给不同的元素添加translateX、Y属性。
