时间戳

首页 > 解决方案 > 如何将 HTML 设计仅保留到标题而不是整个页面

javascript - 如何将 HTML 设计仅保留到标题而不是整个页面

问题描述

我是 HTML 新手，所以请提前原谅。我似乎无法弄清楚如何将这个当前的设计保持在我的页面顶部（有点像在页面上跟随你的标题）。现在，它占据了整个页面。我的欢迎来到我的网站标题文本下方有一段文本，但我看不到它，因为它隐藏在这个设计下，所以我想让这个黑暗+移动的月亮只出现在我页面的前 10%。它目前所做的是多次切分背景，而不是将其余部分留空。这是代码，TIA。

setTimeout(function(){
            $('.moon').css("animation-play-state", "paused");
}, 20000

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 60%, #041931);
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;

}

div {
  background: none;
  z-index: 1;
}

center{
  margin-bottom:-80px;
  margin-top:80px;

}

#text {
  color: #DAA520;
  z-index: -1;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    div {
        margin: 10%;
    }
</style>
        <h1 id="text"><center> Welcome to my Site! </center></h1>
        <div class="moon"></div>
        <div>Hi! In this site you will find information regarding the phases of the moon. Please look at the links attached below to gain a better understanding of items specific to the phases. </div>
    </body>

标签： javascripthtmljquerycss

解决方案

这适用于您的 html 有很多问题，我想说尝试使用 div 作为容器并设置它们的样式。

<style>
  @keyframes moon {
    0% {
      box-shadow: -150px 0px 0px 0px white;
      transform: rotate(-10deg);
    }

    50% {
      box-shadow: 0px 0px 0px 0px white;
    }

    100% {
      box-shadow: 150px 0px 0px 0px white;
      transform: rotate(10deg);
    }
  }

  body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
  }

  #text {
    color: #DAA520;
  }

  .moon {
    position: relative;
    width: 10rem;
    height: 10rem;
    background: #0a0a0a;
    margin: 1rem auto;
    animation: moon 20s linear infinite alternate;
    border-radius: 50%;
    box-shadow: inset -10rem 0 whitesmoke;
    transform: rotate(-10deg);
  }

  .myheader {
    background: linear-gradient(black 20%, #041931);
    height: 40vh;
    position: sticky;
    top:0;
  }

  .mainBody {
    background-color: #DAA520;
  }
</style>

<body>
  <div class="myHeader">
    <h1 id="text">
      <center> Welcome to my Site! </center>
    </h1>
    <div class="moon"></div>
  </div>
  <div class="mainBody">Hi! In this site you will find information regarding the phases of the moon. Please look at the
    links attached
    below to gain a better understanding of items specific to the phases. </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  setTimeout(function () {
    $('.moon').css("animation-play-state", "paused");
  }, 20000);
</script>

推荐阅读