Question

我正在尝试制作响应式png序列。

我试过的代码就在这里。代码有什么问题？
1.如果我删除背景大小：100％;除非它是不可见的，否则它会显示图像它没有回应。（如果我评论背景大小：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>

JSFIDDLE

Answer 1

你有几个错误......

这是你的代码工作

.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>

它有点摇晃，也许原始图像不准确，或者在这个尺寸下工作百分比有一些舍入误差;我不确定。

如何制作响应式png序列？

1 个答案: