我有一个简单的 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/