Javascript 如何更改文字动画，使其仅显示在自己的空间中？_Javascript_Html_Css_Twitter Bootstrap 3_Bootstrap 4

Javascript 如何更改文字动画，使其仅显示在自己的空间中？

javascript html css twitter-bootstrap-3 bootstrap-4

Javascript 如何更改文字动画，使其仅显示在自己的空间中？,javascript,html,css,twitter-bootstrap-3,bootstrap-4,Javascript,Html,Css,Twitter Bootstrap 3,Bootstrap 4,我正在给我正在工作的网站添加一些带有CSS的动画。但是overflow:hidden属性似乎并不像我预期的那样工作。这是我的密码 .jumbotron{ 身高：100%；高度：100vh；对齐项目：居中；显示器：flex；位置：相对位置； } 猪圈{ 显示：内联块；位置：相对位置； } .1{ 位置：相对位置；动画：firanim 1.5s缓进缓出；溢出：隐藏； } .2{ 位置：相对位置；动画：secanim 1s易入易出；溢出：隐藏； } @关键帧firanim{ 从{t

我正在给我正在工作的网站添加一些带有CSS的动画。但是

overflow:hidden

属性似乎并不像我预期的那样工作。这是我的密码

.jumbotron{
身高：100%；
高度：100vh；
对齐项目：居中；
显示器：flex；
位置：相对位置；
}
猪圈{
显示：内联块；
位置：相对位置；
}
.1{
位置：相对位置；
动画：firanim 1.5s缓进缓出；
溢出：隐藏；
}
.2{
位置：相对位置；
动画：secanim 1s易入易出；
溢出：隐藏；
}
@关键帧firanim{
从{top:-50px；}
到{top:0px；}
}
@关键帧secanim{
从{左：-55vw；}
到{左：0px；}
}


乱数假文






欢迎
益智益智益智益智益智。
益智益智益智益智益智益智益智。

您正在为整个框（.sty1和.sty2）设置动画，文本（.lead）不在（.sty1和.sty2）之外，这就是为什么它不会被

溢出隐藏：隐藏
您需要将（.sty1和.sty2）保持在原来的位置，并设置.lead的动画
试试这个
.jumbotron{
身高：100%；
高度：100vh；
对齐项目：居中；
显示器：flex；
位置：相对位置；
}
猪圈{
显示：内联块；
位置：相对位置；
}
.1{
溢出：隐藏；
}
.2{
溢出：隐藏；
}
.1.铅{
位置：相对位置；
动画：firanim 1.5s缓进缓出；
}
.2.铅{
位置：相对位置；
动画：secanim 1s易入易出；
}
@关键帧firanim{
从{
顶部：-50px；
}
到{
顶部：0px；
}
}
@关键帧secanim{
从{
左-55vw；
}
到{
左：0px；
}
}
你的动画设置在.lead
的容器（.sty1
和.sty2
）上，所以它正在移动，你的lead
也在移动，要修复它，你可以用一个隐藏溢出的类将它们包装在div
中，就像这样
我添加了一个动画容器
并设置了溢出：隐藏
，请参见更新的html

.jumbotron{
身高：100%；
高度：100vh；
对齐项目：居中；
显示器：flex；
位置：相对位置；
}
猪圈{
显示：内联块；
位置：相对位置；
}
.1{
位置：相对位置；
动画：firanim 1.5s缓进缓出；
溢出：隐藏；
}
.2{
位置：相对位置；
动画：secanim 1s易入易出；
溢出：隐藏；
}
.动画容器{
溢出：隐藏；
}
@关键帧firanim{
从{
顶部：-50px；
}
到{
顶部：0px；
}
}
@关键帧secanim{
从{
左-55vw；
}
到{
左：0px；
}
}

阿努拉格·斯利瓦斯塔瓦-投资组合






欢迎
益智益智益智益智益智。
益智益智益智益智益智益智益智。
尝试以下HTML：
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>Anurag Srivastava - Portfolio</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

希望有帮助！：）
.jumbotron {
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;
}

.sty {
    display: inline-block;
    position: relative;
}

.sty1 {
    overflow: hidden;
}
.lead_1{
  animation: firanim 1.5s ease-in-out;
  position: relative;
}
.lead_2{
  position: relative;
  animation: secanim 1s ease-in-out;
}
.sty2 {
    overflow: hidden;
}

@keyframes firanim {
    from {top:-50px;}
    to {top:0px;}
}
@keyframes secanim {
    from {left:-55vw;}
    to {left:0px;}
}