PROSAGA码农传奇-html/HTML5-减慢背景动画CSS？

减慢背景动画CSS？

作者: 别烦我
发布时间: 2024-12-23 04:25:57 (25天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    简单地给出
     <code>
      animation
    </code>
     持续时间更长。
  </p>
  <P>
    以下内容对其进行了更改
     <code>
      10s
    </code>
     至
     <code>
      30s
    </code>
    ：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          @keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 30s linear infinite alternate;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div id="animate-area"></div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>