如何让我的主页消失并显示画布？

【问题标题】：How do I make my homepage go fade away and reveal a canvas?如何让我的主页消失并显示画布？
【发布时间】：2020-06-24 23:41:51
【问题描述】：

我正在用 HTML CSS 和 JavaScript 制作一个 .io 游戏，我试图让它在用户点击播放按钮或按下进入主页时消失并显示一个画布（游戏)。我相信我必须使用事件侦听器和 CSS 动画，但是如何让它消失并且屏幕上除了画布之外什么都没有？

注意：我正在为这个项目使用 node.js 服务器。

我的 HTML

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>rainboz.io</title>
        <link rel="stylesheet" href='client/styles/main.css' type="text/css">
        <base href="/">
        <script src='https://cdn.socket.io/socket.io-1.4.5.js'></script>
        <script src='rainboz/app.js'></script>
            var socket = io();

            var random = Math.random();

            var happy = function() {
            socket.emit('happy', {
                reason:'its my birthday' + random
            });
        }
            socket.on('serverMsg', function(data) {
                console.log(data.msg);
            });


        </script>
    </head>
    <body>
        <!--title-->

        <!--changelog-->
        <h2 id='changeot'>Changelog</h2>
        <h2 id="changein">Changelog</h2>

        <!--last upadated-->
        <h2 id='lastupot'>Last Updated: June 22, 2020</h2>
        <h2 id="lastupin">Last Updated: June 22, 2020</h2>
        
        <!--upadates-->
        <p id='toppot'>
            - I just created this changelog,<br/>
            this is where chages will go whenever I make them but <br/>
            I dont have any yet.

        </p>
        <p id='toppin'>
            - I just created this changelog,<br/>
            this is where chages will go whenever I make them but <br/>
            I dont have any yet.

        </p>

        <!--updates 2-->

        <p id='midpot'>
            - I barely even know how to code at all,<br/>
            so I'm kinda just winging it for now <br/>
            I'll just look up how to do stuff as I go.

        </p>

        <p id='midpin'>
            - I barely even know how to code at all,<br/>
            so I'm kinda just winging it for now <br/>
            I'll just look up how to do stuff as I go.
        </p>

        <h2 id="versionnumot">Version Number: 01.03.02</h2> 
        <h2 id='versionnumin'>Version Number: 01.03.02</h2>

        <h2 id='cinfoot'>Contact | About</h2>
        <h2 id='cinfoin'>Contact | About</h2>

        <!--nickname and play button-->

        <div class='ctr'>
          <h1 id='outer'>rainboz.io</h1>
          <h1 id='inner'>rainboz.io</h1>
        </div>
        
        
        <div>
          <form align="center">
            <label id='spawnif'>this is the story of...</label>
            <label id='spawnifin'>this is the story of...</label>
            <input type='text' spellcheck='false' maxlength="20" autocomplete="off" id='nickname' placeholder="Nickname">
            <button id='playbtnot'>Play</button>
            <button id='playbtnin'>Play</button>
          </form>
        </div>

        <form>
            <button id='rbtn'></button>
            <button id='dbtn'></button>
            <button id='ibtn'></button>
            <button id='tbtn'></button>
        </form>

            <button id='mgbtnot'>More Games</button>
            <button id='mgbtnin'>More Games</button>

            <button onclick='happy()'>Happy</button>
    </body>
</html>

我的 CSS

body {
    margin: 0;
    padding: 0;
    background-image: url(trianglebg.png);
    background-size: 475px;
    background-color: rgb(245, 245, 245);
    overflow: hidden;
}



@font-face {
    font-family: 'coconbold';
    src: url(Cocon-Bold-Font.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'coconregular';
    src: url(cocon-regular.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'coconlight';
    src: url(cocon-light.ttf);
    font-style: normal;
    font-weight: 100;
}

#outer {
  text-align: center;
  position: absolute;

  margin: 0;
  padding: 0;
  color: black;
  font-size: 7rem;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  -webkit-text-stroke: 20px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#inner {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  position: absolute;

  margin: 0;
  padding: 0;
  font-family: coconbold;
  font-weight: 100;
  transform: translateX(-50%);
  font-size: 7rem;
  background: linear-gradient(45deg, rgba(255, 40, 40, 1) 15%, rgba(255, 121, 4, 1) 27%, rgba(252, 241, 73, 1) 40%, rgba(82, 252, 73, 1) 50%, rgba(73, 197, 252, 1) 60%, rgba(106, 53, 255, 1) 73%, rgba(150, 0, 214, 1) 85%);
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: anim 4s linear infinite alternate;
}

@keyframes anim {
  from {
    background-position: 0%;
  }
  to {
    background-position: 100%;
  }
}

#nickname {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 40%;
  left: 50%;
  margin: 0;
  padding: 3px 10px 0 9px;
  transform: translateX(-50%);
  width: 30%;
  height: 8%;
  outline: none;
  font-size: 50px;
  font-weight: 1px;
  border-color: lightgrey;
  background-color: rgb(247, 247, 247);
  border-width: 1px;
  font-family: coconbold;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  caret-color: grey;
  animation-name: float-up-3;
  animation-duration: 2s;
}

input::placeholder {
  color: transparent;
}

#spawnif {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-stroke: 6px black;
  animation-name: float-up-2;
  animation-duration: 2s;
}

#spawnifin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  top: 36%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 20px;
  font-family: coconbold;
  color: rgb(245, 244, 244);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
      animation-name: float-up-2;
  animation-duration: 2s;
}

#playbtnin {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 3px;
  outline: none;
      animation-name: float-up-1;
  animation-duration: 2s;
}

#playbtnot {
  box-align: center;
  position: absolute;
  border-radius: 90px;
  width: 215px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  font-size: 35px;
  font-family: coconbold;
  color: white;
  background-color: rgb(180, 179, 255);
  border-color: rgb(110, 107, 255);
  background-size: 500px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-style: solid;
  border-width: 3px;
  outline: none;
    animation-name: float-up-1;
  animation-duration: 2s;
  -webkit-text-stroke: 6px black;
}

#playbtn:hover {
  background-color: rgb(161, 171, 255);
  border-color: rgb(103, 101, 255);
}

.ctr {
  position: absolute;
  top: 15%;
  left: 50%;
  animation-name: float-in;
  animation-duration: 2s;
}

@keyframes float-in {
  from {
    top: -50%;
  }
  to {
    top: 15%;
  }
}

@keyframes float-up-1 {
  from {
    top: 150%;
  }
  to {
    top: 50%;
  }
}

@keyframes float-up-2 {
  from {
    top: 140%;
  }
  to {
    top: 36%;
  }
}

@keyframes float-up-3 {
  from {
    top: 150%;
  }
  to {
    top: 40%;
  }
}

  #changeot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 10px;
    left: 7%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 33px;
    font-family: coconbold;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

  #changein {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 10px;
    left: 7%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 33px;
    font-family: coconbold;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #lastupin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 48px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 18px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #lastupot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 48px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 18px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }
  
  #toppin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 90px;
    left: 13%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 13px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #toppot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 90px;
    left: 13%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 13px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 4px black;   
  }

  #midpin {
    box-align: center;
    position: absolute;
    font-size: 13px;
    border-radius: 90px;
    top: 150px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #midpot {
    box-align: center;
    position: absolute;
    font-size: 13px;
    border-radius: 130px;
    top: 150px;
    left: 9.5%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 4px black;   
  }
  
  #versionnumin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 635px;
    left: 11.25%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 24px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #versionnumot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 635px;
    left: 11.25%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 24px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

    #rbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1150px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(253, 135, 106);
    border-color: rgb(255, 31, 2);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #dbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1210px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(189, 204, 255);
    border-color: rgb(109, 112, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #ibtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1270px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(165, 117, 255);
    border-color: rgb(120, 2, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  
  #tbtn {
    box-align: center;
    position: absolute;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    top: 600px;
    left: 1330px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 35px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(148, 207, 255);
    border-color: rgb(0, 110, 255);
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

  #cinfoin {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 12px;
    right: -6%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 25px;
    font-family: coconregular;
    color: rgb(245, 244, 244);
    -webkit-user-select: none;  
    -moz-user-select: none;   
    -ms-user-select: none;      
    user-select: none;  
  }

  #cinfoot {
    box-align: center;
    position: absolute;
    border-radius: 90px;
    top: 12px;
    right: -6%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 25px;
    font-family: coconregular;
    color: black;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    -webkit-text-stroke: 5px black;   
  }

  #mgbtnot {
    box-align: center;
    position: absolute;
    border-radius: 25px;
    width: 150px;
    height: 40px;
    top: 7px;
    left: 1095px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 19px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: rgb(159, 255, 151);
    border-color: rgb(61, 167, 57);
    border-style: solid;
    border-width: 3px;
    outline: none;
    -webkit-text-stroke: 4px black;   
  }

  #mgbtnin {
    box-align: center;
    position: absolute;
    border-radius: 25px;
    width: 150px;
    height: 40px;
    top: 7px;
    left: 1095px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: 19px;
    font-family: coconbold;
    color:white;
    -webkit-user-select: none;  
    -moz-user-select: none;     
    -ms-user-select: none;      
    user-select: none;
    background-color: transparent;
    border-color:transparent;
    border-style: solid;
    border-width: 3px;
    outline: none;
  }

我的 JavaScript

var express = require('express');
var app = express(); 
var serv = require('http').Server(app);

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
    
});
app.use('/client',express.static(__dirname + '/client/'));

serv.listen(2000);
console.log('Server started.');

var io = require('socket.io') (serv,{});
io.sockets.on('connection', function(socket) {
    console.log('socket connection');

    socket.on('happy', function(data) {
        console.log('happy because ' + data.reason);
    });

    socket.emit('serverMsg', {
        msg: 'hello',
    });


});

【问题讨论】：

    标签： javascript html css css-transitions multiplayer


    【解决方案1】：

    将您的内容放在容器&lt;div&gt; 中，当用户单击容器&lt;div&gt; 的按钮集opacity: 0; 时

      function myFunction() {
                document.getElementById('container').style.opacity = "0";
                setTimeout(func2, 650) // after faded out 

            }
  
  function func2() {
            document.getElementById('canvas-container').style.display = "block";

        }
      #container {
                transition: 0.6s;
                width: 100vw;
            }

            #canvas-container {
                display: none;
            }
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="container"> <!-- Div that contains content-->
            <h1>Hello World!</h1>
            <p>Some text...</p>
            <button onclick="myFunction()">click me</button>
        </div>
        <div id="canvas-container"> <!-- Canvas container outside of container div -->
            <canvas id="canvas" width="100" height="00"></canvas> 
            <p>If you see me that means this works!</p>
        </div>
     
    </body>
</html>

    【讨论】：

    • 感谢您的帮助！但是当我单击按钮时它会淡出但画布没有显示我尝试将大小从 width="100" height="00" 更改为 width="100" height="100" 但仍然没有显示，我还删除了 display: none 行，然后我给了它一个边框，但我仍然看不到画布。
    • 没关系，我知道如何解决它，非常感谢！
    猜你喜欢
    • 1970-01-01
    • 2011-08-28
    • 2014-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-23
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode