cd COVER 的技巧

时间:2019-09-14   作者:互联网搜集整理

下面就是小编带给大家的cd COVER 的技巧方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看。

cd COVER 的技巧

CSS样式:该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。

cd COVER 的技巧

它们的定位是固定定位,高度等于50vh,宽度为100%。默认情况下,使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。

cd COVER 的技巧

当用户切换页面的时候,这些元素被移动回视口当中(通过在<body>元素上添加.page-is-changing class)。下面的图片演示了这个过程。

cd COVER 的技巧

页面切换时,页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素,并具有相同的背景色。

cd COVER 的技巧

然后在<body>被添加.page-is-changing class的时候,将透明度从0修改为1。Loading进度条使用.cd-loading-bar::before伪元素来制作。

cd COVER 的技巧

默认它被缩小(scaleX(0))和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

cd COVER 的技巧
声明:内容仅供参考,图片和文章选取自网络,如侵权请联系删除。