CSS实现QQ浏览器功能

代码

知识点

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

2.CSS中linear-gra die nt() 函数用于创建一个线性渐变的 [图像]。&nbs p;    

background -i mage:
 linear-gradient(direction, color -s top1, color-stop2,  .. .);

   

值 描述

direction	用角度值指定渐变的 方向 （或角度）。
color-stop1, color-stop2,…	用于指定渐变的起止颜色。

3.块级标签居中

pos IT ion:absolute;
left:50%;
top:50%;
m arg in-left:自身 宽 度一 半 ;
mar gin  -t op:自身高度一半；

或者 ：

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

4.做背靠背效果：

① 首先在背靠背效果父 盒子 上面加上透视效果 PE rspective
在在背靠背效果父盒子上加3d效果transform-style: PR eserve-3d;
② 借助背靠隐藏的属性：backface-visibility:hidden
③ 动画效果，不停旋转

5. 圆环 旋转效果

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

6.落空效果

最 开始 有一个 current 类，让所有内容放大两倍，在换屏的时候，删除该类名。所有动画在1.5S内完成，实现落空效果。

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

运行效果

总结

到此这篇关于CSS实现 QQ 浏览器功能的 文章 就介绍到这了,更多相关css qq 浏览器内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS实现QQ浏览器功能 全部内容，希望文章能够帮你解决 CSS实现QQ浏览器功能 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS实现QQ浏览器功能的详细内容...