ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSはマウスが上に移動するとアイコンを回転させます
CSSはマウスが上に移動するとアイコンを回転させます
- php中世界最好的语言オリジナル
- 2018-03-21 17:18:342064ブラウズ
今回はマウスを上に移動したときにアイコンを回転させるための 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の設定が鍵となります。まず、imgのtransition属性を設定する必要があります。ここでの属性は、アニメーションの方法と継続時間を指定します。次に、マウスが上に移動したときに画像が 180 度回転するように .box を設定します:hover:transform: rotate(180deg);
以上がCSSはマウスが上に移動するとアイコンを回転させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。