Question

我使用CSS步骤功能（link）

这个例子工作得很好，但改变了我的形象，如果这种情况不好，任何人都会指导我

mycode的

@-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}

@-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}

@keyframes wink {
from { background-position: 0px; }
to { background-position: -5963px; }
}

.hi {
 width: 205px;
 height: 241px;
  background-image: url("images/Street-background-13.png");
 margin: 0 auto;

 -webkit-animation: wink 6s steps(29, end) infinite;
 -moz-animation: wink 6s steps(29, end) infinite;
 animation: wink 6s steps(29, end) infinite;

我的图片链接 here

Answer 1

如果您更改背景颜色，并添加供应商特定的前缀（哦，并添加最后一个花括号来结束.hi的css定义），它可以工作，检查出来：

        @-webkit-keyframes wink {
          from {
            background-position: 0px;
          }
          to {
            background-position: -5963px;
          }
        }

        @-moz-keyframes wink {
          from {
            background-position: 0px;
          }
          to {
            background-position: -5963px;
          }
        }

        @-o-keyframes wink {
          from {
            background-position: 0px;
          }
          to {
            background-position: -5963px;
          }
        }

        @keyframes wink {
          from {
            background-position: 0px;
          }
          to {
            background-position: -5963px;
          }
        }
        .hi {
          width: 205px;
          height: 241px;
          background-color: #000;
          background-image: url("http://i.stack.imgur.com/r443O.png");
          margin: 0 auto;
          -webkit-animation: wink 6s steps(29, end) infinite;
          -moz-animation: wink 6s steps(29, end) infinite;
          -o-animation: wink 6s steps(29, end) infinite;
          animation: wink 6s steps(29, end) infinite;
        }

<div class="hi">

</div>

CSS图像精灵动画使用steps（）函数不能使用我的图像

1 个答案: