【问题标题】:Smooth background animation流畅的背景动画
【发布时间】:2016-07-21 23:52:15
【问题描述】:

有没有办法让它更流畅?或者,如果有人知道如何更好地做到这一点,我会全神贯注。 这是我所拥有的

html {
    background: url(Images/landscape.jpeg)repeat-y;
    background-size: 150%;
    background-position: bottom;
    -webkit-animation: backgroundScroll 190s linear infinite;
    animation: backgroundScroll 190s linear infinite;
}

@-webkit-keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

@keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}

【问题讨论】:

  • 你忘记了 HTML(你的 HTML 是 CSS):)
  • html 并不重要,它只是背景元素,您可以看到我在 CSS 中所做的事情。背景应用于html。没有内容

标签: html css


【解决方案1】:

在一个元素上设置背景图像然后使用transform: translate移动整个元素可能会得到更好的结果:

@keyframes doScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-400);
  }
}

查看这个较旧但仍然相关的article

【讨论】:

    【解决方案2】:

    我明白了!我只需要玩间隔速度。我把它放慢到 85 秒左右,它更顺畅了。我把它拖得太长了。

    【讨论】:

      【解决方案3】:

      你可以这样做:

      html {
      
          background: url(http://static.adzerk.net/Advertisers/c878296c4c7f43b8bbb285acb73c0e6c.png)repeat-y;
          background-size: 150%;
      	background-position: 0px 0px;
      	animation: animatedBackground 15s linear infinite;
      	-moz-animation: animatedBackground 15s linear infinite;
      	-webkit-animation: animatedBackground 15s linear infinite;
      	-ms-animation: animatedBackground 15s linear infinite;
      	-o-animation: animatedBackground 15s linear infinite;
      }
      @keyframes animatedBackground {
      	0% { background-position: 0 0; }
      	100% { background-position: -400px 0; }
      }
      @-moz-keyframes animatedBackground {
      	0% { background-position: 0 0; }
      	100% { background-position: -400px 0; }
      }
      @-webkit-keyframes animatedBackground {
      	0% { background-position: 0 0; }
      	100% { background-position: -400px 0; }
      }
      @-ms-keyframes animatedBackground {
      	0% { background-position: 0 0; }
      	100% { background-position: -400px 0; }
      }
      @-o-keyframes animatedBackground {
      	0% { background-position: 0 0; }
      	100% { background-position: -400px 0; }
      }

      【讨论】:

        猜你喜欢
        • 2012-02-25
        • 2012-01-13
        • 1970-01-01
        • 2013-05-12
        • 2014-10-30
        • 2010-11-07
        • 2017-07-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多