动画后需要删除CSS文本

时间：2017-09-16 18:20:02

标签： html css html5 css3

我开始建立我自己的投资组合网站，但我遇到了一个问题。当你打开网站我有一个淡入淡出的文字 它占据了我网站第一部分的上半部分。 它占用了我头上的空间。

我试图做不同的事情，但他们不够充分和不专业 如果可能的话，如果空间是完美的 对于淡入淡出的文本可以用某种方式删除 动画结束后。任何有关我的代码的帮助或建议都会受到赞赏。

/*--- Prefixing ---*/

html {
  padding: 0px;
  margin: 0px;
  /*-- Compatible stuff--*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*-- Compatible stuff--*/
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  /*-- Compatible stuff--*/
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
}


/*--- Content Adjustment ---*/

.content {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
}


/*--- Text-header ---*/

.hey,
.header {
  color: black;
  padding: 10px 0px;
  margin: 0px;
  text-align: center;
  font-size: 8rem;
  font-family: 'Lobster', cursive;
  text-shadow: 4px 4px white;
  letter-spacing: 5px;
  word-spacing: 5px;
  background-attachment: fixed;
  letter-spacing: 20px;
  /*-- Compatible tuff--*/
  -webkit-animation: fadeUp 5s ease;
  -moz-animation: fadeUp 5s ease;
  -o-animation: fadeUp 5s ease;
  -ms-animation: fadeUp 5s ease;
  animation: fadeUp 3s infinte;
}


/*--- Begin texts ---*/

.first,
.second,
.third {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 1s;
  animation-fill-mode: forwards;
}

.second {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

.third {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 7.5s;
  animation-fill-mode: forwards;
}


/*--- Page Parts ---*/

.about-me {
  height: 100vh;
  width: 100%;
  /*-- Compatible stuff--*/
  -webkit-background-size: cover;
  -moz-background-size: cover -ms-background-size: cover;
  background-attachment: fixed;
  padding-top: 200px;
  background-color: white;
  animation: imgTrans 5s;
  -webkit-animation-delay: 9.5s;
  animation-fill-mode: forwards;
}

.what-i-do {
  height: 100vh;
  width: 100%;
  background-image: url(/images/backgrounds/development.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.how-i-work {
  height: 100vh;
  width: 100%;
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.projects {
  height: 100vh;
  width: 100%;
  background-image: url();
  background-size: cover;
  background-attachment: fixed;
}


/*--- Footer ---*/

.contact {
  height: 40vh;
  width: 100%;
  background-color: bisque;
  background-size: cover;
  background-attachment: fixed;
}

.footer {
  color: black;
  text-decoration: none;
}

.media {
  display: line;
}

.insta {
  height: 50px;
  width: 50px;
}

.linked {
  height: 50px;
  width: 250px;
}

.mail {
  height: 50px;
  width: 50px;
}

.black-box {
  height: 5vh;
  width: 100%;
  background-color: black;
}


/*---Keyframes---*/

@keyframes image-fadeIn {
  0% {
    border-radius: 0%;
    opacity: 0;
  }
  50% {
    border-radius: 5%;
    opacity: 0.5;
  }
  100% {
    border-radius: 50%;
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
  }
}

@keyframes imgTrans {
  0% {
    background-image: url(/images/backgrounds/white.png);
    background-size: cover;
  }
  100% {
    background-image: url(/images/backgrounds/a6ad2246932d022c1aa713b96d8d6915.jpg);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link href="/css/portfolio.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico|Permanent+Marker|Chewy" rel="stylesheet">
  <title>Ruben Nijhuis</title>
</head>

<body>
  <div class="container">
    <div class="about-me">
      <p class="first">
        You came here because you need a website, don't you?
      </p>

      <p class="second">
        Well, you're at the right address.
      </p>

      <p class="third">
        Or website.
      </p>

      <h1 class="header">Hey, this is me.</h1>

      <p class="content">
        From Amsterdam. &#40;great place btw&#41;<br> Addicted to coding and desigingn websites.<br> And ready for your website, or internship.<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="what-i-do">
      <h1 class="header">I make websites</h1>
      <p class="content">

      </p>
    </div>

    <div class="black-box"></div>

    <div class="how-i-work">
      <h1 class="header">How I work</h1>
      <p class="content">
        The client is the most important piece of the whole project.<br> The developer (me) could just make it and say: "Here it is".<br> But that might not get up to the clients need.<br> Thats what I want to change, why would you give a template to
        someone who want a original and new site?<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="projects">
      <h1 class="header">Projects</h1>
    </div>

    <div class="black-box"></div>

    <footer>

    </footer>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

我通过将div的高度和填充设置为0px使文本消失，我在动画的最后一帧中使用它。 CSS如下所示。

100% {
    border-radius: 50%;
    opacity: 1;
    height:0px;
    margin:0px;
  }

请检查我的修改并尝试建立您的网站，如果这可以解决您的问题，请告诉我们！ btw不错的网站!!! 

/*--- Prefixing ---*/

html {
  padding: 0px;
  margin: 0px;
  /*-- Compatible stuff--*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*-- Compatible stuff--*/
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  /*-- Compatible stuff--*/
  -ms-overflow-x: hidden;
  -ms-overflow-y: auto;
  overflow-x: hidden;
  overflow-y: auto;
}


/*--- Content Adjustment ---*/

.content {
  margin-top: 75px;
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
}


/*--- Text-header ---*/

.hey,
.header {
  color: black;
  padding: 10px 0px;
  margin: 0px;
  text-align: center;
  font-size: 8rem;
  font-family: 'Lobster', cursive;
  text-shadow: 4px 4px white;
  letter-spacing: 5px;
  word-spacing: 5px;
  background-attachment: fixed;
  letter-spacing: 20px;
  /*-- Compatible tuff--*/
  -webkit-animation: fadeUp 5s ease;
  -moz-animation: fadeUp 5s ease;
  -o-animation: fadeUp 5s ease;
  -ms-animation: fadeUp 5s ease;
  animation: fadeUp 3s infinte;
}


/*--- Begin texts ---*/

.first,
.second,
.third {
  color: black;
  text-align: center;
  font-size: 30px;
  font-family: 'Pacifico', cursive;
  text-shadow: 1px 1px white;
  line-height: 2em;
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 1s;
  animation-fill-mode: forwards;
}

.second {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

.third {
  opacity: 0;
  animation: fadeIn 3.5s ease;
  -webkit-animation-delay: 7.5s;
  animation-fill-mode: forwards;
}


/*--- Page Parts ---*/

.about-me {
  height: 100vh;
  width: 100%;
  /*-- Compatible stuff--*/
  -webkit-background-size: cover;
  -moz-background-size: cover -ms-background-size: cover;
  background-attachment: fixed;
  padding-top: 200px;
  background-color: white;
  animation: imgTrans 5s;
  -webkit-animation-delay: 9.5s;
}

.what-i-do {
  height: 100vh;
  width: 100%;
  background-image: url(/images/backgrounds/development.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.how-i-work {
  height: 100vh;
  width: 100%;
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.projects {
  height: 100vh;
  width: 100%;
  background-image: url();
  background-size: cover;
  background-attachment: fixed;
}


/*--- Footer ---*/

.contact {
  height: 40vh;
  width: 100%;
  background-color: bisque;
  background-size: cover;
  background-attachment: fixed;
}

.footer {
  color: black;
  text-decoration: none;
}

.media {
  display: line;
}

.insta {
  height: 50px;
  width: 50px;
}

.linked {
  height: 50px;
  width: 250px;
}

.mail {
  height: 50px;
  width: 50px;
}

.black-box {
  height: 5vh;
  width: 100%;
  background-color: black;
}


/*---Keyframes---*/

@keyframes image-fadeIn {
  0% {
    border-radius: 0%;
    opacity: 0;
  }
  50% {
    border-radius: 5%;
    opacity: 0.5;
  }
  100% {
    border-radius: 50%;
    opacity: 1;
    height:0px;
    margin:0px;
  }
}

@keyframes fadeUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px);
    opacity: 0;
    height:0px;
    margin:0px;
  }
}

@keyframes imgTrans {
  0% {
    background-image: url(/images/backgrounds/white.png);
    background-size: cover;
  }
  100% {
    background-image: url(/images/backgrounds/a6ad2246932d022c1aa713b96d8d6915.jpg);
    height: 0px;
    margin: 0px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link href="/css/portfolio.css" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico|Permanent+Marker|Chewy" rel="stylesheet">
  <title>Ruben Nijhuis</title>
</head>

<body>
  <div class="container">
    <div class="about-me">
      <p class="first">
        You came here because you need a website, don't you?
      </p>

      <p class="second">
        Well, you're at the right address.
      </p>

      <p class="third">
        Or website.
      </p>

      <h1 class="header">Hey, this is me.</h1>

      <p class="content">
        From Amsterdam. &#40;great place btw&#41;<br> Addicted to coding and desigingn websites.<br> And ready for your website, or internship.<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="what-i-do">
      <h1 class="header">I make websites</h1>
      <p class="content">

      </p>
    </div>

    <div class="black-box"></div>

    <div class="how-i-work">
      <h1 class="header">How I work</h1>
      <p class="content">
        The client is the most important piece of the whole project.<br> The developer (me) could just make it and say: "Here it is".<br> But that might not get up to the clients need.<br> Thats what I want to change, why would you give a template to
        someone who want a original and new site?<br>
      </p>
    </div>

    <div class="black-box"></div>

    <div class="projects">
      <h1 class="header">Projects</h1>
    </div>

    <div class="black-box"></div>

    <footer>

    </footer>
  </div>
</body>

</html>

相关问题
最新问题