• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

CSS实现QQ浏览器功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 

background-image:
 linear-gradient(direction, color-stop1, color-stop2, ...);

   

代码

知识点

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

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

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

3.块级标签居中

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

或者:

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

4.做背靠背效果:

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

5.圆环旋转效果

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

6.落空效果

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


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

运行效果



总结

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
border-radius给元素添加圆角边框的方法发布时间:2022-06-21
下一篇:
js判断并告知支持css属性(值)的 情况分析发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap