如何阻止文本在过渡中移动？答案

【问题标题】：How do I stop the text from moving in transition?如何阻止文本在过渡中移动？
【发布时间】：2018-11-25 01:08:45
【问题描述】：

所以我希望我的背景是动画，所以我进行了一些研究，但结果是文本和背景都在移动。如何阻止文本移动？这是我得到 css 动画的地方：Side-scrolling parallax

这是我的代码：

.not {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
  -webkit-animation: moving-images 400s ease infinite;
  -moz-animation: moving-images 400s ease infinite;
  -o-animation: moving-images 400s ease infinite;
  animation: moving-images 400s ease infinite;
}

@keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-moz-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-o-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Growtopia Quiz</title>
  <meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
  <meta name="author" content="Julius Magpayo">
  <link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
  <script type="text/javascript" src="script.js"></script>
  <link rel="icon" type="image/png" href="gq.png" />
  <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
  <div class="bg">
    <center>
      <div class="not">
        <img src="logor.gif">
        <h2>Welcome To Growtopia Quiz</h2>
        <p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
        <p>It also updates often to add more levels and features</p>
        <a href='easypart1.html' class='button'>PLAY</a>
        <br>
        <h2>How To Save My Level</h2>
        <p>The easiest way to save your progress is to bookmark it</p>
        <p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
        <br>
        <h2>Is This a Scam?</h2>
        <p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
        <p>I don't and I won't ask for your password or whatsoever</p>
        <br>
        <h2>Level Progression</h2>
        <p>You can easily skip levels but that's up to you</p>
        <p>if you don't wanna have thrill in this quiz</p>
        <h2>Suggestions? Problems?</h2>
        <p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:magpayokevin22@gmail.com">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
      </div>
    </center>
  </div>
</body>

</html>

如果背景是唯一移动的东西，那就太好了。谢谢:)

【问题讨论】：

标签： html css animation transition parallax

【解决方案1】：

请检查更新的 HTML，我没有你的 bg-images 所以无法确认，请使用我的 html 检查一次。

.not {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAA1BMVEWAgICQdD0xAAAAH0lEQVRYhe3BAQ0AAADCoPdPbQ43oAAAAAAAAACAbwMf/gABw/u21QAAAABJRU5ErkJggg==') 0 0, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARwAAACxCAMAAAAh3/JWAAAAA1BMVEXMzMzKUkQnAAAASElEQVR4nO3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIALA8UNAAFusnLHAAAAAElFTkSuQmCC') 40% 0, url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsx0jp-pSLpj0Y5ts1c_EaGk6nNwHpLR00KZzXJ-UcdA5CAAU9') 80% 0, #000;
  -webkit-animation: moving-images 400s ease infinite;
  -moz-animation: moving-images 400s ease infinite;
  -o-animation: moving-images 400s ease infinite;
  animation: moving-images 400s ease infinite;
}

@keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-moz-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

@-o-keyframes moving-images {
  0% {
    left: 0;
  }
  50% {
    left: -9999px;
  }
  100% {
    left: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Growtopia Quiz</title>
  <meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
  <meta name="author" content="Julius Magpayo">
  <link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
  <script type="text/javascript" src="script.js"></script>
  <link rel="icon" type="image/png" href="gq.png" />
  <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
  <div style="position: relative;height: 100vh;">
    <div class="bg">

    </div>
    <div style="position: absolute; top:0; left:0; height: 100%;width: 100%;">

      <center>
        <div class="not">
          <img src="logor.gif">
          <h2>Welcome To Growtopia Quiz</h2>
          <p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
          <p>It also updates often to add more levels and features</p>
          <a href='easypart1.html' class='button'>PLAY</a>
          <br>
          <h2>How To Save My Level</h2>
          <p>The easiest way to save your progress is to bookmark it</p>
          <p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
          <br>
          <h2>Is This a Scam?</h2>
          <p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
          <p>I don't and I won't ask for your password or whatsoever</p>
          <br>
          <h2>Level Progression</h2>
          <p>You can easily skip levels but that's up to you</p>
          <p>if you don't wanna have thrill in this quiz</p>
          <h2>Suggestions? Problems?</h2>
          <p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:magpayokevin22@gmail.com">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
        </div>
      </center>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

用于测试目的。我已经添加了背景图片。我已经在你的 bg 类和 div 下面的页面中添加了一个新的div 类my_content 你可以根据你的改变背景图片的URL。

.not {
    position:absolute;
    bottom:20px;
    left:0;
    width:100%;
    text-align:center;
}

.bg { 
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('https://www.tesla.com/sites/default/files/images/software_update.jpg') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
  -webkit-animation: moving-images 400s ease infinite;
     -moz-animation: moving-images 400s ease infinite;
       -o-animation: moving-images 400s ease infinite;
          animation: moving-images 400s ease infinite;
}
         
.my_content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
@keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
        
@-moz-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-webkit-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}
@-o-keyframes moving-images {
  0%   {left:0;}
  50%  {left:-9999px;}
  100% {left:0;}
}    

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html>

<head>
    <title>Growtopia Quiz</title>
    <meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
    <meta name="author" content="Julius Magpayo">
    <link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
    <script type="text/javascript" src="script.js"></script>
    <link rel="icon" type="image/png" href="gq.png" />
    <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
    <div class="bg">
    </div>
    <div class="my_content">
        <center>
            <div class="not">
                <img src="logor.gif">
                <h2>Welcome To Growtopia Quiz</h2>
                <p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
                <p>It also updates often to add more levels and features</p>
                <a href='easypart1.html' class='button'>PLAY</a>
                <br>
                <h2>How To Save My Level</h2>
                <p>The easiest way to save your progress is to bookmark it</p>
                <p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
                <br>
                <h2>Is This a Scam?</h2>
                <p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
                <p>I don't and I won't ask for your password or whatsoever</p>
                <br>
                <h2>Level Progression</h2>
                <p>You can easily skip levels but that's up to you</p>
                <p>if you don't wanna have thrill in this quiz</p>
                <h2>Suggestions? Problems?</h2>
                <p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:magpayokevin22@gmail.com">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
            </div>
        </center>
    </div>
</body>

</html>

【讨论】：

@RaajNadar 我只是在您发布请求时缩进它，所以它自动被拒绝了。感谢你的付出。这不是我的本意。
@RajatJain 我以为你拒绝了它，但社区做到了！不知道为什么
其实我第一次遇到这种情况。我只是在编辑它，你发布了请求。当我保存更改时，它自动被拒绝。