2017-09-16 96 views
1

我開始構建我自己的投資組合網站,並遇到了問題。當你打開網站時,我會在文字 中褪色,佔據我網站第一部分的上半部分。 它佔用了我的頭部空間。
動畫後需要刪除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. &#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

我提出的文本通過設置高度和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>