QQ浏览器官网

1. 项目可以用<section>标签对不同部分进行划分；

2. 对css进行初始化：cssreset.css

3. 页面占满整个屏幕且不出现滚动条

      html,body{ 
            width: 100%;
            height: 100%;
            overflow: hidden;
                      }
   

4. 依赖滚滚屏插件实现鼠标滚动做出相应：jquery.mousewheel.min.js

   github: https://github.com/jquery/jquery-mousewheel

   使用滚滚屏时，使用timeout进行节流 ,  让最后一次滚动有效  ; 
   
   在pc端节流一般控制在500毫秒。
   

• 用法：

  在监听屏幕滚动的时候，先清除定时器，再设置500毫秒的定时器；
  滚动事件写在回调函数中
  

5. 通过监听其上下滚动实现界面的界面

6. 对不同界面的公共样式进行搭建，然后使用js对特别的样式进行划分

7. 在界面样式搭建时，建议使用弹性布局。

8. css3动画
   animation: myAnimate 1s infinite alternate linear

     myAnimate 自定义动画
     1s   动画所花费的时间
     infinite  规定动画应该无限次播放
     alternate  动画应该轮流反向播放
     linear  动画的曲线（匀速）
   
   
   /*滚动的指示器*/
        .scroll{
        ....
    /*ccs3动画*/
      animation: unAndDowm 0.65s infinite alternate;
    }
   
      /*实现自定义动画*/
    @keyframes unAndDowm {
      0%{transform:translateY(0px)}
     100%{transform:translateY(10px)}
    }
   

9. css3渐变色介绍
   linear-gradient
   线性渐变的方向 默认从上到下

• 语法：
  background: linear-gradient(direction, color-stop1, color-stop2, ...);

  direction ：渐变开始的角度, 默认是180deg
  color-stop1 ： 渐变的过渡的颜色 （ 可以写多个，还可以在其后添加百分比  ）
  

10. background 简写属性在一个声明中设置所有的背景属性。
    可以设置如下属性：(用逗号隔开)

    - background-color
    - background-position : center  -60px
    - background-size
    - background-repeat
    -  background-origin
    - background-clip
    - background-attachment
    - background-image
    

11. 绝对定位时，使其居中显示的做法：

     width:200px;
     height:200px;
     left:50%;
     top:50%;
     margin-left:-100px;
     margin-top:-100px;
    

12. 微调技巧

• 声明当前文件的编码格式

    /*声明当前文件的编码格式*/
      @charset "UTF-8";
  

• 设计联调

  在浏览器的F12后，在source界面，右击鼠标，弹出创建文件夹到工作空间；
  
  选中项目中的css文件夹,  点击确认后会弹出一个是否允许的权限提示，点击允许；
  
  选中要关联的文件，查看你编码是否正确。
  
  右键选择map将其映射到网络中。按回车键即可。
  
  映射成功后，只要在浏览器上调试的都会相应的修改在编辑器中。
  

13. 透视介绍

• 近大远小 ： http://www.w3school.com.cn/cssref/pr_perspective.asp

• 一旦在父标签设计透视，子标签就会有透视效果

• 设置

  perspective：80px;
  -webkit-perspective:80px;
  

14. 使用css3动画时的初始化模板

    transform:  translateX(0px) translateY(0px) translateZ(0px) 
                rotateX(0deg) rotateY(0deg) rotateZ(0deg) 
                scaleX(1) scaleY(1) scaleZ(1);
    

• 注意：平移的单位是px,旋转的单位是deg,放大的默认值是1

15. 面向和背向效果

• 效果：图片面向前，可见； 背向，不可见

• backface-visibility : visible | hidden;

  - 设计标签背向时是否可见 ;
  - 如果在旋转元素不希望看到其背面时，该属性很有用。
  - **父标签在3D效果下能显现**
  

• 父标签添加3D效果： transform-style

     - 属性规定如何在 3D 空间中呈现被嵌套的元素
     - 该属性必须与 transform 属性一同使用
  

  • 语法：transform-style: flat|preserve-3d;

16. 给界面添加落空效果：通过添加落空类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);
  }
  

• 点击和滚动屏幕的时候都应该有落空类

17. 公转和自转

     - 公转的速度比自转慢，且公转是父亲li在转，自转是儿子img本身在转，都是围绕z轴转过360度。
     - 添加动画animation即可实现
    

18. 要在Z层分层，就要在其父元素上设置3d效果；

19. background-size

background-size: length | percentage | cover | contain;

    *length*
    设置背景图像的高度和宽度。
    第一个值设置宽度，第二个值设置高度。
    如果只设置一个值，则第二个值会被设置为 "auto"。

测试

  *percentage*
   以父元素的百分比来设置背景图像的宽度和高度。
   第一个值设置宽度，第二个值设置高度。
   如果只设置一个值，则第二个值会被设置为 "auto"。

测试

cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

测试

  contain
  把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

20. 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
  

21. 从四面八方过来
    给不同的元素添加translateX、Y属性。