Question

我已经看到有多种方法可以使对象在加载时淡入淡出，但是每次尝试将其应用于自己的代码时，我一定会弄乱某些东西。我一直在尝试使用css和javascript，所以我会尽量使用我可以使用的东西。

我希望Hello在加载时逐渐消失，但是5秒后，下一页也会逐渐消失。

到目前为止，这是我的代码。

<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>

</head>


<body>
    <div id="Welcome">
        <h1> Hello </h1>
        </div>

     <div id="Next"> 
        <a href="next.html"><h2> Next Page </h2></a>
    </div> 

    <video autoplay muted loop id="VidBackground">
        <source src="video/home.mp4">
    </video>


</body>
</html>

这是我的CSS

h1, h3, a {
    color: #ffffff;
    line-height: 2;
}

#welcome {
    position: absolute;
    bottom: 15%;
    right: 20%;
    z-index: 2;
}

#next {
    position: absolute;
    bottom: 10%;
    right: 20%;
    z-index: 2;
}

#VidBackground {
    position: fixed;
    right: 0;
    bottom: 0;
    object-fit: cover;
    z-index: -1;
}

Answer 1

这非常适合CSS过渡。

您可以像这样使用它们：

transition: <css property> <transition-duration> <transition-function>

示例：

#next {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;

    /*pointer-events makes this node not respond to mouse/touch events
    Which is probably what we want while the button is invisible.*/
    pointer-events: none;
}

现在，每当opacity上的#next样式更改时，它将过渡而不是立即显示。通常，您会通过一些javascript触发它。

window.onload = function() {
    setTimeout(function() {
        //Re-enable mouse/touch events on the #next button
        document.getElementById("next").style.pointerEvents = 'auto';

        //Show the #next button
        //Since opacity style is transitioned, the opacity change will automatically trigger the transition.
        document.getElementById("next").style.opacity = 1;
    }, 5000);
});

有关转换的更多信息，请参见MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/transition

载入时淡入文本

1 个答案: