css转换步骤失败,当鼠标元素提前到达
我有一个关于CSS3 steps()函数的问题。css转换步骤失败,当鼠标元素提前到达
当您用鼠标输入元素时,转换开始。 在动画准备好之前,当您用鼠标离开元素时,它将返回到原始状态。但是步骤()不再有效。有没有解决方法?
我的小提琴:Fiddle
我SCSS:
* {
background: #f00;
}
.block {
width: 38px;
height: 38px;
background-image: url('http://s8.postimg.org/gr7lvdms5/sprite_test.png');
transition: all 0.5s steps(15);
background-position: 0 0;
position: absolute;
left: 100px;
top: 100px;
&:hover {
background-position: -570px 0;
}
}
有人可以帮我吗?
PS:我已经发现这个: CSS transition on png sequence using steps 1,但这并不能解决我的问题。
您可以使用3D变换的解决方法。从你的代码,我已经加入了transform
翻转箭头,为transform
一个transition
:
transform: rotateX(0deg);
transition:transform 0.5s;
&:hover {
transform: rotateX(-180deg);
}
这里你可以看到一个工作示例:http://jsfiddle.net/1t5u3r3L/1/
它以优雅的方式解决了问题(1起) – vals 2015-02-09 17:55:29
嗨,Alvaro,谢谢你的回答!这确实解决了这个问题。接下来的问题是,还有一种情况是方块完全填满白色,所以箭头将方块拉到白色。这就是我选择精灵的原因。 – 2015-02-10 08:46:58
我不明白。这对你当前的照片来说不是问题吗?箭头在白色背景上是白色的 – 2015-02-10 14:45:37
只是出于好奇,为什么不解决你的问题是你链接的答案? – vals 2015-02-09 17:54:07
它并没有解决我的答案,因为我希望它始终在鼠标悬停上运行,这些线程在鼠标离开时开始运行。 – 2015-02-10 08:44:36