Adam Argyleの病気のマウスアウトCSSホバー効果

Codepenを閲覧して、私はAdam Argyleによる魅惑的なCSSホバー効果に出くわしました。デモのアプリのような感触、特に背景色は左から右に滑らかに移行し、右から左に出ると、すぐに私の注意を引きました。私はそれを再現しながら、トランジション、変換、オフセットのエレガントな使用を強調したプロセスを再現しました。

私の最初のアプローチは、バックグラウンドトランジション、 background-sizeとbackground-position操作に焦点を合わせました。しかし、私は望ましい双方向運動を達成することができませんでした。

次に、CSS変換を調査しました。 scaleX()は潜在能力を提供しましたが、リンク要素に直接適用すると、コンテンツが変更され、望ましくない結果が変更されました。解決策？擬似要素！

これが私の実装です：

まず、ベーススタイル：

 {
  位置：相対;
}

a :: before {
  背景：＃ff9800;
  コンテンツ： "";
  挿入図：0;
  位置：絶対;
  変換：Scalex（0）;
  トランジション：.5Sの容易さを変換します。
  z -index：-1;
}

これにより、オレンジ色の背景を備えた擬似要素（ ::before ）が作成され、リンク内に絶対に配置されます。 transform: scaleX(0);最初はそれを隠し、 transitionによりスムーズなアニメーションが保証されます。

ホバー効果が定義されます。

 A：ホバー::前{
  変換：Scalex（1）;
  変換オリジン：右;
}

ホバーでは、 scaleX(1)擬似要素を拡張し、決定的に、 transform-origin: right;拡張点を右に設定します。これは、マウスアウトの動作の鍵です。

魔法は、 transitionの相互作用とtransform-originの変化にあります。遷移は、Hoverで0から1にscaleX()スムーズにアニメーション化し、マウスアウトで再び戻ります。 left上のtransform-originのシフトは、 rightで双方向の効果のアニメーション方向を逆転させます。当初、私はこれに苦労していましたが、 transform-origin特性が欠けていることが証明されました。

インスピレーションをくれたAdam Argyleに感謝します！この効果は、創造的に使用する場合の単純なCSS技術の力を示しています。

以上がAdam Argyleの病気のマウスアウトCSSホバー効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。