Как сохранить HTML дизайн только в шапке, а не на полной странице - PullRequest
Новая
       0

Как сохранить HTML дизайн только в шапке, а не на полной странице

0 голосов
/ 29 апреля 2020

Я новичок в 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>

1 Ответ

0 голосов
/ 29 апреля 2020

Это работает, у вашего 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...