完整项目代码

知识点

  1. 结合fullpage.js实现全屏滚动

  2. CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值 描述
direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,… 用于指定渐变的起止颜色。

  1. 块级标签居中

    position:absolute;
left:50%;
top:50%;
margin-left:自身宽度一半;
margin-top:自身高度一半；

    或者：

    position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);

  2. 做背靠背效果：
    ① 首先在背靠背效果父盒子上面加上透视效果perspective
    在在背靠背效果父盒子上加3d效果transform-style: preserve-3d;
    ② 借助背靠隐藏的属性：backface-visibility:hidden
    ③ 前两个图片Y轴不变，后三个图片初始旋转180度。
    在旋转和背靠背隐藏的帮助下，就可以分开显示了。
    ④ 动画效果，不停旋转
    ⑤ 层级效果：在Z轴上进行平移，实现不同高度的层级效果

  3. 圆环旋转效果
    ① 自定义动画
    ② 调整不同XYZ角度旋转构成旋转效果

  4. 落空效果
    最开始有一个current类，让所有内容放大两倍，在换屏的时候，删除该类名。所有动画在1.5S内完成，实现落空效果。
    CSS：模拟实现QQ浏览器_3d
    CSS：模拟实现QQ浏览器_线性渐变_02

  5. 三屏中线条有公转和自转。公转围绕中间Q旋转，自转为○围绕Y轴自转。

  6. perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
    当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

运行效果

CSS：模拟实现QQ浏览器_3d_03
CSS：模拟实现QQ浏览器_C_04CSS：模拟实现QQ浏览器_线性渐变_05