0

Hover Off effectCSSを使って素敵を実現しようとしています。ここにかなり良い例がありますが、プロパティ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;
}

何か案は？

4

4 に答える 4

1

これが動作中のデモです

と背景についてもっと知るためのチュートリアル

これは、変換を使用してそれを行う別の方法です。

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

キーフレームを使用した更新されたデモ

私たちはそれを行うための3つの方法を見てきました。どれが最適かを決めましょう。

  1. 滑らかで素敵な外観を与えるトランジション。
  2. コンテンツの成長中にぼやける変換。
  3. ハイエンドにつながるキーフレームですが...

選択はあなた次第です！

于 2012-09-22T09:24:12.210 に答える
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);
}​
于 2012-09-21T16:22:07.253 に答える
1

あなたが提供したコードの問題は、アニメーションをスムーズに実行するのに十分な「ステップ」または「キーフレーム」がないことだと思います。

このデモを参照してください: http://dabblet.com/gist/3763579 . プロパティを使用するボックス [右側の 1 つ] は、1 つまたは 2 つのピクセルだけをアニメーション化するのに 2 秒かかるため、アーティファクトが次のピクセルにジャンプする前に明らかな遅延が発生します。元の位置に戻るアニメーションと同じであるため、トランジションが途切れ途切れで滑らかではありません。

于 2012-09-21T20:14:11.440 に答える
0

私の悪い、これは動作します：

/* 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;
于 2012-09-21T16:21:59.230 に答える