マウスアップアイコンの回転の特殊効果のための CSS コード共有

この記事では、マウス アップ アイコンの回転効果を実現するための CSS を主に紹介します。必要な友人は参照してください。

マウス アップ アイコンの回転効果は、次のような企業プロジェクト、特にトップ ナビゲーション バーでよく使用されます。

次のステップは、CSS を使用して、マウスが上に移動したときにアイコンの回転効果を実現することです。

ここにボックスが置かれ、ボックスの中に

写真が置かれています。より明確に見るために、ここに大きな写真が置かれています。ここで達成される効果は、マウスが .box ボックス上に移動すると、アイコン img が 180 度回転することです。

style では、img と .box:hover img の設定が重要です。まず、transition

attributeを img に設定する必要があります。ここでの属性は、アニメーションの方法と継続時間を指定します。次に、マウスが上に移動したときに画像が 180 度回転するように .box を設定します: hover:

以下の -webkit- などの設定は主に各メーカーのブラウザに対応するように設定されています。

得られる効果は以下の図に示すとおりです:

以上がマウスアップアイコンの回転の特殊効果のための CSS コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。