动画后需要删除CSS文本
问题描述：
我开始构建我自己的投资组合网站，并遇到了问题。当你打开网站时，我会在文字 中褪色，占据我网站第一部分的上半部分。 它占用了我的头部空间。
动画后需要删除CSS文本
我试图做不同的事情，但他们是不够的，不专业。
如果可能的话，如果用于淡入文本的空间 可能以某种方式被删除，那将是完美的。
动画结束后。有关我的代码的任何帮助或建议将不胜感激。
/*--- 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. (great place btw)<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>
答
我提出的文本通过设置高度和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. (great place btw)<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>