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

Question

我正在尝试Hover Off effect使用 CSS 实现一个不错的效果。这里有一个很好的例子，但我不能用属性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);

测试一下

.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

这是工作演示

和教程以了解更多有关背景的信息

这是使用变换的另一种方法。

.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;
}
​

更新了带有关键帧的演示

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

1. 过渡，使外观光滑美观。
2. 在内容增长时模糊的变换。
3. 导致高端但...的关键帧

选择是你的！

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;