为了练习，我正在重新编码this网站。我在我的codepen中将背景图像更改为黑色，因为图像在codepen中不起作用。 Here's a link to my code.我也在这里放置代码，以防您无法查看代码集：
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Coming Soon</title>
</head>
<body>
<div class="background">
<h2 class="logo">Logo</h2>
<div class="dropdownwrapper">
<h1 class="bigtext">Coming Soon</h1>
</div>
<hr class="divider">
<h4 class="smalltext">35 days left</h4>
</div>
</body>
</html>
styles.css的
body {
background-color: white;
font-size: 10px;
}
.background {
animation-name: fadeout;
animation-duration: .8s;
background-image: url(Images/forestbridge.jpg);
background-size: cover;
background-position: top;
animation-fill-mode: backwards;
height: 100vh;
font-family: "Raleway", sans-serif;
}
.logo {
color: white;
font-weight: 100;
font-size: 1.5rem;
padding: 1rem 0 0 1rem;
}
.bigtext {
color: white;
text-transform: uppercase;
font-size: 4rem;
text-align: center;
padding-bottom: 1rem;
}
.dropdownwrapper {
animation-name: dropdown;
animation-duration: .8s;
animation-fill-mode: forwards;
}
.divider {
border: none;
width: 20%;
height: 1px;
background-color: lightgrey;
margin-bottom: 1.5rem;
}
.smalltext {
color: white;
font-size: 1.25rem;
text-align: center;
}
@keyframes fadeout {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes dropdown {
0% {
margin-top: 10vh;
}
100% {
margin-top: 40vh;
}
}
发生这种情况是因为你正在制作margin-top文本的COMING SOON。由于元素在normal document flow中，动画边缘给人的印象是COMING SOON之后的元素也被动画化，即使它们不是动画。要解决这个问题，你应该使用transform动画，它操纵元素的位置in place。看看forked codepen。
此外，如果您希望将整个文本块置于页面中心，则应将其全部包装为div并将其绝对定位。我有forked another codepen来证明这一点。
下滑效果在第二个代码中显得更为深刻。