我想在标题中创建一个背景,它应该不断地从右到左移动,图片应该自己重复。我不想在这里使用 javascript。
最佳答案
为此使用 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>
关于html - 如何在不使用选取框的情况下使用 CSS 从右到左创建移动背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17766658/