所以我试图创建一个登陆页面，当页面加载时，页面的标题从顶部和侧面滑出。我知道基本的工作，但我似乎不能把标题在某个位置，以便当页面加载它回到原来的位置。我还没有实现Javascript，但这里是剩下的代码::
HTML
<body onload="slide()">
<main>
<section class="landing">
<h1>Find Your Perfect Vacation Point</h1>
<h3>Let us do the finding for your!</h3>
</section>
</main>
<script src="script.js"></script>
</body>
CSS
*{
padding: 0px;
margin: 0px;
overflow-x: hidden;
font-family: Open Sans;
}
.landing{
background-image: url("bali.jpg");
width: 100%;
height: 80%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
opacity: .9;
}
.heading-container{
height: 100%;
width: 100%;
margin-top: 10%;
text-align: center;
}
h1{
font-weight: bold;
color: white;
margin:20px;
font-size: xx-large;
text-align: center;
position: relative;
top: 20%;
transform: translateY(-38%);
}
h3{
font-weight: lighter;
color: white;
margin:20px;
text-align: center;
position: relative;
top: 20%;
}
谢谢你提前帮我!!
PS:对不起，如果我没有很好地解释我的问题。即使一个问题很简单，也很难描述清楚。你可以用CSS动画来做到这一点。下面是你所描述的一个例子:
@keyframes slide-from-above {
from { transform: translate(0, -30px); color: blue }
to { transform: translate(0, 0); color: red }
}
.nav {
animation-name: slide-from-above;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: backwards;
display: inline-block;
}
#nav1 {
animation-delay: 0;
}
#nav2 {
animation-delay: 1s;
}
#nav3 {
animation-delay: 2s;
}
#nav4 {
animation-delay: 3s;
}<div id="header">
<div class="nav" id="nav1">Home</div>
◆
<div class="nav" id="nav2">About</div>
◆
<div class="nav" id="nav3">Contact</div>
◆
<div class="nav" id="nav4">Support</div>
</div>就像下面这样创建一个JS函数，并为你的元素添加一个应该更改的id。然后你可以改变持续时间和放松，如果你想，它应该工作。如果是你想要的，请告诉我。
我希望我能帮到你。
如果答案是正确的，请为其他人标记为已解决。由于
<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body onload="slide()">
<main>
<section class="landing" id="heading">
<h1>Find Your Perfect Vacation Point</h1>
<h3>Let us do the finding for your!</h3>
</section>
</main>
<script>
function slide() {
div = document.getElementById('heading');
div.animate(
[{
transform: "translateY(-30px)",
},
{
transform: "translateY(0)",
},
], {
duration: 700,
easing: "ease-out",
fill: "both",
}
);
}
</script>
</body>
</html>