gpt4 book ai didi

javascript - 如何让 HTML5 页面在全屏时发生变化

转载 作者:行者123 更新时间:2023-11-28 02:26:10 25 4
gpt4 key购买 nike

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

index.html

<!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>

我们称之为A。我有另一个版本 (B) 显示 particles 的全屏页面:

index.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>

css/样式.css

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;
}

我怎样才能让页面显示 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 { 
}
body {
height: 100%;
}
div, img {
position:fixed;
height:100%;
width:100%;
}
#gif {
z-index:2;
background: url(https://media.giphy.com/media/2s0ouek7HJmWQ/giphy.gif) no-repeat center center fixed;
background-size: cover;
opacity:1;
}

#gif.fade {
transition: 1s;
opacity:0;
z-index:-1; /* ADD THIS */
}
<div id="gif"></div>
<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>

关于javascript - 如何让 HTML5 页面在全屏时发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53905614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com