css - CSS Transform Scale でテキストがぼやける

Question

トリガーするとボックスが拡大するホバー効果があります。私が持っている唯一の問題は、テキストが移行中にぼやけて見え、「変換」されると再びシャープになることです。

ここに投稿する前に、私は調査を行うことに決め、この投稿に出くわしました。これは私の問題でもあるようです:

彼らの回答を自分のビルドに適用しましたが、それでもぼやけた効果が発生します。以下のリンクを提供しました。誰かが私が解決できることを教えてくれたら、それは素晴らしいことです!

遷移コードの例:

-moz-transform:scale(1.05,1.05);

score 1 · Accepted Answer

同等ではありませんが、:hover で width、height、left、top、font-size 属性を設定すると、Chrome でぼやけずに機能します。

.cta:hover {
    width: 500px;
    height: 500px;
    font-size: 400%;
}

他の唯一の回避策は、アニメーション @keyframes を使用し、適切な量の ~5 または 10 を設定することです。これにより、各キーフレーム間のブラーの修正が強制される場合があります。

score 0 · Accepted Answer

ここに画像の説明を入力 CSStricks.comでこれを見つけました:

トランスフォームも使用するように設定すると表示されます

translate3d( 0, 0, 0)

修正できますが、回転/変換時にフォントが少しぼやけてしまいます。ここを参照してください: http://codepen.io/WillsonSmith/pen/4/2

Jquery を使用しており、スライダーの H3 タグを修正する必要がありました。大きなテキストはぼやけていませんでした。私はその行を書きました

$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px ");

そしてそれは私にとってそれを最もよく修正しました。変換の前に -webkit- が必要でした。他の人がそれを使用しないと言ったので、理由はわかりません。いくつかの異なる設定での外観の画像をアップロードしました。

2 に答える 2