Question

我使用此动画作为背景构建了一个网站，去除了云彩： https://codepen.io/WebSonick/pen/vjmgu

网站上的多余内容需要滚动才能使其整体可读。

动画背景可防止网站滚动，使其处于底部带有白条的错误状态。 以下是显示此问题的视频： https://youtu.be/UBK4j5or6KU

这是我的代码：

HTML：

 <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>???????</title>
       <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
    <div class="content">
        <img src="test1.png" width="450">
        <p><a href="index2.html">episode 1</a></p>
        <p><a href="index3.html">episode 2</a></p>
        <p><a href="index4.html">episode 3</a></p>
        <p><a href="index5.html">episode 4</a></p>
        <p><a href="index6.html">episode 5</a></p>
        <p><a href="index7.html">episode 6</a></p>
        <p><a href="index8.html">episode 7</a></p>
        <p><a href="index9.html">episode 8</a></p>
        <p><a href="index10.html">episode 9</a></p>
    </div>
    <div class="stars"></div>
    <div class="twinkling"></div>
    </body>
    </html>

CSS：

@font-face {
  font-family: tt2020;
  src: url(TT2020StyleB-Regular.woff2);
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.content a {
  color:#ffffff;
  text-decoration: none;
  font-weight: bold;
}

.content p {
   font-family: tt2020;
    font-size: 35px;
    padding: 15px;
    text-align:center;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;

}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

如果我删除动画背景，问题就会自行解决。 因此我的问题是：是否可以在不放弃背景的情况下解决此问题？
如果没有，我怎么能找到这种背景的替代品？
提前致谢。

Answer 1

您可以通过在 position: fixed 和 position: absolute 元素上使用 stars 而不是 twinkling 来修复它。结果如下：

@font-face {
  font-family: tt2020;
  src: url(TT2020StyleB-Regular.woff2);
}


.content {
   position: relative;
   text-align: center;
   z-index: 1;
}

.content a {
  color:#ffffff;
  text-decoration: none;
  font-weight: bold;
}

.content p {
   font-family: tt2020;
    font-size: 35px;
    padding: 15px;
    text-align:center;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;

}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

<div class="content">
        <img src="test1.png" width="450">
        <p><a href="index2.html">episode 1</a></p>
        <p><a href="index3.html">episode 2</a></p>
        <p><a href="index4.html">episode 3</a></p>
        <p><a href="index5.html">episode 4</a></p>
        <p><a href="index6.html">episode 5</a></p>
        <p><a href="index7.html">episode 6</a></p>
        <p><a href="index8.html">episode 7</a></p>
        <p><a href="index9.html">episode 8</a></p>
        <p><a href="index10.html">episode 9</a></p>
    </div>
    <div class="stars"></div>
    <div class="twinkling"></div>

动画背景导致滚动问题

1 个答案: