QQ浏览器官网

2017-09-26 本文已影响0人小草莓蹦蹦跳

项目可以用<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 linear

  myAnimate 自定义动画
  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将其映射到网络中。按回车键即可。

映射成功后，只要在浏览器上调试的都会相应的修改在编辑器中。

透视介绍

近大远小： http://www.w3school.com.cn/cssref/pr_perspective.asp
一旦在父标签设计透视，子标签就会有透视效果

设置

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属性。

QQ浏览器官网

猜你喜欢

热点阅读