我正试图实现一个新的动画背景到我的网站(但绝不是由我设计的，但我得到了作者的许可，在我的网站上使用)，并希望也编辑它以适应我的口味，这是我的第一个障碍发生的地方。我从github repo中添加了必要的代码，它允许我将这个很酷的超空间warpspeed动画添加到我网站的背景中，但是在查看时，它只显示了动画的一半，但是我想让它填充整个屏幕。我怀疑这是来自我的css，但是我对web开发很陌生，我一直在学习，我可以在html上做一点编辑，但不是css，所以如果有人能解释这个，我真的很感激。
这是我索引的一部分:
<head>
<meta charset="UTF-8">
<title>removed</title>
<script src="js/warpspeed.min.js"></script>
<meta name="description" content="removed">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
<!--Browser Theming for Chrome, Firefox, Opera + Windows Phone + iOS Safari-->
<meta name="theme-color" content="#37383F">
<meta name="msapplication-navbutton-color" content="#37383F">
<meta name="apple-mobile-web-app-status-bar-style" content="#37383F">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="EasterEgg()">
<div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;">
<canvas id="canvas" style="width:100%; height:100%;"></canvas>
<script type="text/javascript">new WarpSpeed("canvas");</script>
</div>
这是我的css，我把所有的东西，因为我不知道哪一部分是相关的半屏问题:
/*
==========================
BASE
==========================
*/
canvas {
position:absolute;
z-index: 0;
}
html {
height:100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
background-color: #1e1e1e;
text-align: center;
font-size: 1em;
font-family: Roboto Mono;
font-weight: 400;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: inherit;
text-decoration: none;
outline: 0;
cursor: pointer;
}
/*
==========================
MAIN
==========================
*/
.boxcontainer {
height: auto;
width: auto;
display: flex;
align-items: center;
justify-content: center;
}
.box {
z-index: 10;
height: auto;
width: 300px;
max-width: 95%;
display: inline-block;
position: relative;
text-align: center;
animation:slide 0.8s ease;
animation-fill-mode: forwards;
}
#dirbox {
display: none;
}
img {
height: 128px;
width: auto;
}
.title {
line-height: 1em;
margin: 10px 0;
color: #fff;
width: auto;
height: auto;
display: block;
cursor: pointer;
}
.desc {
line-height: 25px;
margin: 10px 0;
color: #808080;
transition: all 0.4s ease;
animation-fill-mode: forwards;
}
.link {
line-height: 25px;
margin: 10px 0;
color: #808080;
transition: filter 0.2s ease, transform 0.4s ease;
}
.link:hover {
filter: brightness(.6);
}
.linkcont {
margin: 0 auto;
width: auto;
display: inline-block;
position: relative;
margin: 0;
transition: filter 0.2s ease, transform 0.4s ease;
width: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.linksquare {
height: 50px;
width: 50px;
display: inline-block;
position: relative;
margin: 0;
transition: all 0.2s ease;
}
.linksquare:hover {
filter: brightness(.6);
}
svg {
height: 25px;
width: 25px;
fill: #7f7f7f;
padding: 10px;
}
.clickable {pointer-events: none}
.unclickable {pointer-events: auto; user-select: none; -moz-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none;}
/*
==========================
ANIM
==========================
*/
@keyframes slide {
0% {transform: translate(0, 2.5em); opacity: 0;}
100% {transform: translate(0, 0); opacity: 1;}
}
任何帮助将不胜感激，如果我说的任何事情听起来很愚蠢，我很抱歉，因为我是一个初学者。
删除"position:absolute;"从你的CSS (.canvas).