悬停在字体大小和背景大小上

Question

我正在尝试用CSS实现一个很好的Hover Off effect。有一个非常好的here示例，但是我不能用background-size和font-size属性重现它。

其效果只是在鼠标悬停时放大图像和文本，并以一种干净的方式返回到原始状态(使用-webkit-transition)。此代码失败：

.nice a {
    background:  url(../my_image.png) no-repeat;
    background-size: 40px 37px;
    font-size: 12px;

    /* HOVER OFF */
    -webkit-transition: background-size 2s;
    -webkit-transition: font-size 2s;
}

.nice a:hover{
    background: url(../my_image.png) no-repeat ;
    background-size: 43px 39px;
    font-size: 13px;

    /* HOVER ON */
    -webkit-transition: background-size 2s;
    -webkit-transition: font-size 2s;
}

有什么想法吗？

Answer 1

我认为问题是，在你提供的代码中，没有足够的“步骤”或“关键帧”让动画流畅地运行。

请看这个演示：http://dabblet.com/gist/3763579。使用你的属性的方框在右边，时钟上有2秒的时间来制作一个或两个像素的动画，所以在工件跳到下一个像素之前会有一个明显的延迟。与动画返回原地相同，因此会出现起伏不定的不平滑过渡。

Answer 2

您可以使用transform:scale(value);

Test it

.nice a {
    font-size: 12px;
    display:block;
    -webkit-transition:all 2s ease;
    -webkit-transform-origin:top left;
}

.nice a:hover {
    -webkit-transform:scale(1.3);
}​

Answer 3

下面是有效的Demo

和教程，了解有关background的更多信息

这是使用转换的另一种方式。

.nice a { -webkit-transition: font-size .2s ease-in-out; }
.nice a:hover { -webkit-transform: scale(1.1); }

关键帧的例子(缺点是不是一直悬停，它不会停留)。

@-webkit-keyframes  scalar{
    from{
         background-size: 40px 37px;
    font-size: 22px;
}
to{
    background-size: 103px 79px;
    font-size: 32px;
}
}

.nice2 a{
    background:  skyblue;
    background-image:url("http://lorempixel.com/300/200/abstract");
   background-repeat:no-repeat;
    background-size: 40px 37px;
    font-size: 22px;
    color:white;
}
.nice2 a:hover{
    -webkit-animation: scalar 1s;
}
​

使用keyframes的升级演示

我们已经看到了三种方法。让我们决定哪一个最适合它。

1. Transitions，它提供了平滑和漂亮的appearance.
2. Transforms，在生长content.
3. Keyframes的过程中变得模糊，这导致了高端但...

选择权在你！