0
我試圖做一個網站，在頁面加載一個div幻燈片從佔領整個瀏覽器窗口到完全出框架。同時，一些中心文本從不透明度0變爲1，但是當我加載頁面時，文本以某種方式在滑動的div頂部。我試着在文本上設置一個動畫延遲，以便在div傳遞後出現，但它看起來並不像我想要的那樣。另外我對這個混亂的代碼表示歉意，我是新手。當另一個動畫div通過時，如何隱藏我的動畫文本？
這裏的小提琴： https://jsfiddle.net/3qz4LgmL/
body {
margin: 0px 0px 0px 0px;
height: 100vh;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#b485f2, #d879fa); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#b485f2, #d879fa); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#b485f2, #d879fa); /* For Firefox 3.6 to 15 */
background: linear-gradient(#b485f2, #d879fa); /* Standard syntax (must be last) */
background-repeat: none;
overflow:hidden;
}
#slide {
width: 0px;
height: 100vh;
background: #d82bc4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1); /* IE6-9 fallback on horizontal gradient */
animation: slideaway;
animation-duration: 3.4s;
position: absolute;
}
@keyframes slideaway {
40%{width: 100%}
100%{width: 0px}
}
#title {
margin: 0px 0px 0px 0px;
font-family: Baloo Bhaina;
color: white;
font-size: 45pt;
animation: slideright;
}
#sub {
font-family: Helvetica;
color: aqua;
font-size: 45px;
text-shadow: 2px 2px #285aad;
animation: slideright;
animation-duration: 4.5s;
margin-top: 10vh;
}
#titles {
height: 120vh;
display: inline-block;
}
.button {
background-color: #862224;
width: 30%;
border-radius: 8px;
box-shadow: 3px 3px #6d191b;
font-family: Baloo Bhaina;
color: white;
padding-top: 12px;
padding-bottom: 8px;
}
@keyframes slideright {
0%{opacity: 0}
100%{opacity: 1}
}
.button:hover {
background-color: #681113;
width: 30%;
border-radius: 8px;
font-family: Baloo Bhaina;
color: white;
padding-top: 12px;
padding-bottom: 8px;
animation-iteration-count: 1;
}
.arrowdown {
height: 50px;
width: 70px;
margin: 0px 0px 0px 0px;
}
.arrowbox {
background-color: #862224;
border-radius: 5px;
display: inline-block;
height: 45px;
box-shadow: 3px 3px #6d191b;
}
.arrowbox:hover {
background-color: #681113;
border-radius: 5px;
display: inline-block;
height: 45px;
box-shadow: 3px 3px #6d191b;
}
.faces {
background-color: white;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
height: 300px;
width: 300px;
}<div id="slide"></div>
<center><div id="titles">
<center><p id="title">DJ VORT-X</p></center><br><br><br><br>
<p id="sub">All-round music for your event</p>
<br><br><br><br>
<center><div class="button"><center>CONTACT ME</center></div></center>
<br><br><br><br><br><br><br><br>
<div class="arrowbox"><img class="arrowdown" src="arrowdown.png"></div>
</div>
</center>