我正在尝试制作响应式 png 序列。
我试过的代码在这里。代码有什么问题?
1. 如果我删除了 background-size :100%;它显示图像直到并且除非它不可见。
2. react 迟钝。 (如果我评论背景大小:100%)
CSS
.eye {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 100%;
animation: play 3s steps(58) infinite;
}
@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
@-o-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
HTML
<div class="eye">
<div class="pngseq">
</div>
</div>
最佳答案
你有几个错误...
这是你的代码工作
.eye {
position: relative;
width: 70%;
height: 800px;
background-color: red;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 5800%;
animation: play 3s steps(57) infinite;
}
@keyframes play {
from { background-position: 0px 0px; }
to { background-position: 100% 0px; }
}
<div class="eye">
<div class="pngseq">
</div>
</div>
它有点晃动,可能是原始图像不准确,或者在此尺寸下使用百分比可能有一些舍入误差;我不确定。
关于html - 如何制作响应式png序列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30816560/