html - 如何在不使用选取框的情况下使用 CSS 从右到左创建移动背景？

Question

我想在标题中创建一个背景，它应该不断地从右到左移动，图片应该自己重复。我不想在这里使用 javascript。

Answer 1

为此使用 css3 动画

它们使用起来非常简单

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}


<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>

http://jsfiddle.net/simurai/CGmCe/light/