Question

假设我有pic.png的重复背景，就像这样......

body {
    background-image: url(pic.png);
}

我想让它在某个方向上无缝移动，比如东北以给定的速度，无限。我已经看到w3 schools用动画来做，但逐渐减慢并加速，更不用说来回移动了。

还有一件事，（我认为它会自动完成，但我会解释它），当它移动时，我不想看到空白的空虚，我想看到背景重复它当它移动。

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#55eb58488c64b5c4ef5b25a64a8c4f3b

简单！设置您的背景并为其指定animation property。

body {
  background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
  background-size: 261px;
  animation: moveIt 10s linear infinite;
}

animation: moveIt 10s linear infinite;

我将我的关键帧功能命名为moveIt 功能的延迟是10秒您可以为animation-timing-function传递许多值，我将其设置为linear，以便我的动画保持稳定。因此，最终不会加速或减速。

然后在你的关键帧功能中，给它一个名字，并设置

的位置和方式

现在，关键帧功能可以通过传递to，from或百分比％来实现。

在这种情况下，我使用的是to和from，但0%和100%也可以正常使用。

@keyframes moveIt {
  from {background-position: bottom left;}
  to {background-position: top right;}
}

注意：我的weave使用Prefix-free，这样您就不必担心供应商前缀了。但是，您也可以考虑使用Autoprefixer。

body {
  background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
  background-size: 261px;
  animation: moveIt 10s linear infinite;
}
@keyframes moveIt {
  from {background-position: bottom left;}
  to {background-position: top right;}
}

Answer 2

您所需要的基本上就是您所关联的内容。你需要一个模式图像，然后制作无限动画，但移动背景的数量与关键帧100％的图像尺寸一样多。

如果您的图片是32x32像素，并且您希望它向上和向右移动：

animation-timing-function: linear;

您还需要将缓动设置为线性以防止减速：

    if (!Network.isClient && !Network.isServer) {
        if (GUI.Button (new Rect (10, 10, 150, 100), "Start Server")) {
            Debug.Log ("Starting Server");
            startServer ();
        }   

        if (GUI.Button (new Rect (10, 200, 150, 100), "Refresh Hosts")) {
            Debug.Log ("Refreshing");
            refreshHostList ();
            if (hostList != null) {
            for (int i = 0; i < hostList.Length; i++) {

                GUI.Button (new Rect (400, 100 + (110 * i), 300, 100), hostList [i].gameName);
                Network.Connect (hostList [i]);

            }
       }
     }
 }

如何使背景无限移动？

2 个答案: