Question

我想仅使用 CSS 在两个页面之间进行转换。

我尝试了两种解决方案：

一旦我们点击按钮，我就会使用伪元素“active”，并使用我的 .body（在我的例子中为 .full_width）的不透明度创建一个过渡，使整个页面消失。

.button {
&:active + .full_width {
opacity: 0;
transition: opacity 2s;
}
}

当我在没有条件的情况下尝试这个 CSS 时，它完美地工作，我的页面漂亮地消失了。但是当我设置“活动”条件时，它不起作用。

我创建了一个 :after 按钮，没有内容，但背景占据整个屏幕

.button::after {
    content:'';
    position: fixed;
    z-index: -10;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    width: 100%;
    opacity: 0;
    background-color: #DFE3E5;
    transition: opacity 2s;
}

然后，当我激活按钮时，我更改 z-index 以将 ::after 置于前台并更改不透明度。动画再次完美运行，但我的链接不起作用。它不会加载新页面。

.button:active::after
{
    z-index: 1;
  opacity: 1;
}

你知道如何解决我的问题吗？我离得太近了，这很令人沮丧^^

谢谢！

页面之间的 CSS 淡出过渡

0 个答案: