时间戳

首页 > 解决方案 > TranslateY 不会超出 CSS 中的某个边界

html - TranslateY 不会超出 CSS 中的某个边界

问题描述

所以我试图创建一个登陆页面，当页面加载时，页面的标题会从顶部和侧面滑出。我知道基本工作，但我似乎无法将标题放在某个位置，以便在页面加载时它会回到原来的位置。我还没有实现 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：对不起，如果我没有很好地解释我的问题。即使是一个简单的问题，也很难描述一个问题。

标签： htmlcss

解决方案

您可以使用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>

推荐阅读