ホームページ > 記事 > ウェブフロントエンド > CSS を使用してマウスアップ アイコンの回転効果を実現する方法に関するグラフィック コードの詳細な説明
CSS を使用してマウスアップ アイコンの回転効果を実現する方法に関するグラフィック コードの詳細な説明
- 黄舟オリジナル
- 2017-06-18 13:16:581664ブラウズ
この記事では、マウス アップ アイコンの回転効果を実現するための CSS を主に紹介します。必要な友人は参照してください。
マウス アップ アイコンの回転効果は、次のような企業プロジェクト、特にトップ ナビゲーション バーでよく使用されます。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p,img,body{
margin: 0;
padding: 0;
}
.box{
height: 150px;
width:300px;
background: #1b7b80;
margin: 0 auto;
padding: 20px;
}
.box:hover img{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
img{
margin: 0 auto;
display: block;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
</style>
</head>
<body>
<p class="box">
<img src="img/down.png" alt=""/>
</p>
</body>
</html>ここにボックスが置かれ、ボックスの中に写真が置かれています。より明確に見るために、ここに大きな写真が置かれています。ここで達成される効果は、マウスが .box ボックス上に移動すると、アイコン img が 180 度回転することです。
style では、img と .box:hover img の設定が重要です。まず、transitiontransform: rotate(180deg);以下の -webkit- などの設定は主に各メーカーのブラウザに対応するように設定されています。
以上がCSS を使用してマウスアップ アイコンの回転効果を実現する方法に関するグラフィック コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。