ホームページ > 記事 > ウェブフロントエンド > CSS を使用してマウスが上に移動したときにアイコンが回転する効果を実現する方法
CSS を使用してマウスが上に移動したときにアイコンが回転する効果を実現する方法
- 不言オリジナル
- 2018-06-20 16:00:302453ブラウズ
この記事では、マウス アップ アイコンの回転効果を実現するための 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);以下の -webkit- などの設定は主に各メーカーのブラウザに対応するように設定されています。
css3 と jQuery を使用して、マウスに追従して上下に揺れるテキストを実現します
css3 と jQuery を使用して、マウスに追従して上下に揺れるテキストを実現します
以上がCSS を使用してマウスが上に移動したときにアイコンが回転する効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。