Question

我有一个带有骰子的spritesheet; 6张脸。它的脸是70 x 70像素总精灵图像是70 x 420像素

现在我想制作一个从1到6的CSS动画（这很简单）另外我想改变大小; 50％加倍，100％恢复正常。

:local(.mydice)
{
    width: 70px;
    height: 70px;
    background: url('/images/dices.png');   
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 600%;
    animation: dicemove1 5s steps(6, end) infinite;
}

然后使用关键帧进行更改：

@keyframes dicemove1
{
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -420px; }
}

上面的CSS代码段有效。但现在添加代码使其增长失败：

50% { width: 140px; height: 140px; margin-top: -35px; margin-left: -35px; background-position: 0px ???? }

我知道背景位置必须改变以支持更大的尺寸但问题是我使用步骤因为我不想滚动图像但看到它从面对面改变（1,2,3,4， 5,6）

将100除以6不会产生漂亮的圆整数，这使得50％的变化有点困难。一直在寻找可以处理步骤的关键帧，但没有找到这样的东西。有人知道这样做的方法吗？

Answer 1

我找到了解决方案。

transform: scale(2,2);

这会增加骰子。现在我可以同时使用2个动画; 1更改脸部其他调整大小

animation: anim1 1s steps(6, end) infinite, anim2 1s steps(36, end) infinite;

@keyframes anim1
{
    0% { background-position: 0px 0px; }
    100% { background-position: 0px -600px; }
}

@keyframes anim2
{
    50% { transform: scale(2,2); }
}

css动画精灵表

1 个答案: