2015.02.15
css

CSSだけでマウスオーバー時にクルッと回転するボタンのメニュー

CSSのアニメーションを使いこなせるようになると、フラッシュやjQueryのようなエフェクトのメニューを作ることができます。

今回はマウスオーバーするとクルクルと回転するボタンをCSSで作成してみましたので、紹介します。
CSSだけでマウスオーバー時にクルッと回転するボタンのメニュー

CSSだけでクルクル回転するボタンメニュー

はじめに

今回はフォントはGoogleのウェブフォントのOpen Sans Condensedというフォントを使用していますので<head>に以下を記述しています。

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

また、今回はアイコンも画像ではなく、CSSです。Font Awesomeのアイコンを使用していますので、<head>に以下を記述。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
MEMO:
Font Awesomeの使い方に関しては過去のこちらに書きました。

HTMLのソース

<ul>
  <li><a href="#"><div class="animation_button grey"><i class="fa fa-home fa-2x"></i><br />Home</div></a></li>
  <li><a href="#"><div class="animation_button grey"><i class="fa fa-picture-o  fa-2x"></i><br />Gallery</div></a></li>
  <li><a href="#"><div class="animation_button grey"><i class="fa fa-key fa-2x"></i><br />Login</div></a></li>
  <li><a href="#"><div class="animation_button grey"><i class="fa fa-globe   fa-2x"></i><br />About us</div></a></li>
  <li><a href="#"><div class="animation_button grey"><i class="fa fa-envelope fa-2x"></i><br />Contact</div></a></li>
</ul>

<i>タグはFont Awesomeで使用しているタグです。Font Awesomeを使用しない場合は<i>タグ部分を画像やその他で置き換えてもOKです。

CSSのソース

ul, li {
   margin:0;
   padding:0;
}
li {
   list-style:none;
   float:left;
}
.grey {
   color:#616161;/*フォントとアイコンの色*/
}
.animation_button {
   background:#83BEC5;/*背景色*/
   width:80px;
   height:68px;
   margin:10px 5px;
   text-align:center;
   line-height:1.4;
   padding:22px 10px 10px;
   border-radius: 80px;
   -webkit-border-radius: 80px;/*Safari & Chrome */ 
   transiton:all 0.5s ease;/*アニメーションの設定*/
   -webkit-transition: all 0.5s ease;/*Safari & Chrome */ 
   -moz-transition: all 0.5s ease;/*FireFox */ 
   -ms-transition: all 0.5s ease;/*IE*/
   border:2px solid #F2F2F2;
   font-family: 'Open Sans Condensed', sans-serif;
   float:left;
   font-weight:bold;
}
.animation_button:hover{/*マウスオーバー時*/
   background:#F76D8A;/*背景色*/
   animation: kaiten 1s;
   animation-iteration-count: 2;/*アニメーションの繰り返し回数*/
   -webkit-animation: kaiten 1s; /*Safari & Chrome */ 
   -webkit-animation-iteration-count: 2;/*Safari & Chrome */ 
}

@keyframes kaiten {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); } 

}
@-webkit-keyframes kaiten { /*Safari & Chrome */ 
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); } 
}

CSS3の@keyframesを使いこなせるとデザインの幅がとっても広がりますね。

MEMO:
@keyframesについては過去にこちらこちらで書きました。

33行目と35行目のkaitenは39行目と44行目の@keyframesで作ったkaitenというアニメーションをここで(今回はマウスオーバー時に)実行する!という意味です。

慣れるまでややこしいですが、フラッシュやjQueryと比べるととっても簡単です。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP