Javascript 如何在全屏显示时更改HTML5页面_Javascript_Css_Html

Javascript 如何在全屏显示时更改HTML5页面

javascript css html

Javascript 如何在全屏显示时更改HTML5页面,javascript,css,html,Javascript,Css,Html,我有一个简单的index.html文件作为登录页，显示全屏gif： index.html 如何让页面显示A，然后当用户单击屏幕上的任何位置时，页面会淡入B 我是HTML和CSS的初学者，所以提前谢谢您可以在CSS中使用不透明度属性 document.addEventListener（'click'，e=>{ document.getElementById（'gif'）.classList.add（'fade'）； }); document.getElementById（'particles-

我有一个简单的index.html文件作为登录页，显示全屏gif：

index.html 如何让页面显示A，然后当用户单击屏幕上的任何位置时，页面会淡入B

我是HTML和CSS的初学者，所以提前谢谢

您可以在CSS中使用不透明度属性

document.addEventListener（'click'，e=>{
document.getElementById（'gif'）.classList.add（'fade'）；
});
document.getElementById（'particles-js'）。addEventListener（'mousemove'，e=>{
console.log（'boop'）；
});
html{
}
身体{
身高：100%；
}
海事处处长{
位置：固定；
身高：100%；
宽度：100%；
}
#gif{
z指数：2；
背景：url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif)无重复中心固定；
背景尺寸：封面；
不透明度：1；
}
#褪色{
过渡：1s；
不透明度：0；
z索引：-1；/*添加此*/
}

这里的标志
//load（'particles-js'，'particles.json'）；
您想使用JavaScript还是CSS？我知道你已经把JavaScript作为一个标签了。@LloydNicholson TBH我对其中任何一个都持开放态度，但我更喜欢简单。谢谢你的帮助！不过还有一个问题：运行particles.js的第二个页面（B）以前有响应光标移动和单击的功能，但现在没有了。这个功能是否被覆盖了？我已尝试删除中的EventListener
，但页面中仍然没有光标响应。您只需在gif淡出时更改其z索引。编辑我的答案以反映这一变化。（CSS）这似乎不行。为了清楚起见，我已将您海报答案中的顶部代码块粘贴到块，并取消对particlesJS.load（'particles-js'，'particles.json'）的注释行。这是正确的，否？否，尝试添加z索引：-1；到CSS中的#gif.fade。（我把“添加此”的评论放在上面）啊，明白了，z-index添加就可以了，谢谢！particle.js响应速度较慢，但功能正常。
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Full-screen animated gif background</title>
    <style>
        /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
        html { 
          background:  url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed; 
          background-size: cover;
        }
        body {
            height: 100%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particles</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="particles-js">
        <div class="btext">
            <h1>logo here</h1>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS.load('particles-js', 'particles.json')
    </script>
</body>
</html>

html,body{
    width:100%;
    height:100%;
    background:#111;
}
#particles-js{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}