文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在全屏时更改HTML5页面

问如何在全屏时更改HTML5页面
EN

Stack Overflow用户

提问于 2018-12-23 17:17:10

回答 1查看 80关注 0票数 2

我有一个简单的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)，它显示颗粒的全屏页面

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/style.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

html

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-23 18:05:02

您可以在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53905614

复制

相似问题

问如何在全屏时更改HTML5页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在全屏时更改HTML5页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在全屏时更改HTML5页面
EN