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

您可以使用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 2

我认为问题，使用您提供的代码，没有足够的“步骤”或“关键帧”让动画顺利运行。

请参阅此演示：http://dabblet.com/gist/3763579。使用您的属性[右侧一个]的框在时钟上有2秒钟来动画一个或两个像素，因此在工件跳转到下一个像素之前会有明显的延迟。与回到原点的动画相同，因此波动，不平滑的过渡。

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

升级演示

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

过渡，外观流畅美观。
转换，在增长内容时会模糊不清。
关键帧导致高端但......

选择是你的！

Answer 4

我的坏，这有效：

/* HOVER OFF */
-webkit-transition-property: background-size, font-size;
o-transition-property: background-size, font-size;
-moz-transition-property: background-size, font-size;
transition-property: background-size, font-size;

-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;

将鼠标悬停在字体大小和背景大小上

4 个答案: