[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション

Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。

パタリと開いた後、ぷら〜んとするのいいですね。

実際の動作は、下記デモページでお楽しみください。
Chrome, SafariのWebkit系がよいです。

Hinged Twitter Button

実装は、こんな感じです。

HTML

TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<a href="http://twitter.com/jonitrythall">
  <span class="button">
    <i class="fa fa-twitter"></i>
  </span>
  <span class="handle">
    <h4>@jonitrythall</h4>
  </span>
  <span class="screw">
    <span class="line"></div>
  </span>
</a>

CSS

画像は一切使用されておらず、蝶番もbox-shadowなどを使ってスタイルされています。

// Begin styles
.button {
  background-color: #55acee;
  border: none;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  z-index: 1;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
  text-align: center;
}

span {
  display: block;
}

.fa-twitter {
  color: white;
  font-size: 30px;
  margin-top: 5px;
  text-shadow: 1px 1px 1px #adadad;
}

.screw {
  width: 7px;
  height: 7px;
  background-color: gray;
  border-radius: 50%;
  border: 1px solid #3f3f3f;
  margin-left: 125px;
  top: 25px;
  position: absolute;
  box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
}

.line {
  height: 7px;
  width: 1px;
  background-color: #3f3f3f;
  margin-left: 3px;
}

a { 
  color: black;
  height: 40px;
  width: 140px;
  text-decoration: none;
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 100px;
}

.handle {
  z-index: -1;
  margin-top: -61px;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  position: relative;
  line-height: 40px;
  background-color: #f2f2f2;
  color: #3f3f3f;
  box-shadow: rgba(0,0,0,0.2) 0 2px 3px, inset rgba(0,0,0,0.2) 0 -1px 2px;
}

h4 {
  margin-left: 4px;
  text-shadow: 1px 1px 1px white;  
}

a:hover .button {
  -webkit-animation: open 1s forwards; 
  animation: open 1s forwards; 
}

// Animation
@-webkit-keyframes open {
  0% {
    -webkit-transform-origin: 128px 30px;
  }
  25%{
    -webkit-transform-origin: 128px 30px;
    -webkit-transform: rotate(-120deg);
  }
  50% {
    -webkit-transform-origin: 128px 30px;
    -webkit-transform: rotate(-70deg);
  }
  100% {
    -webkit-transform-origin: 128px 30px;
    -webkit-transform: rotate(-90deg);
  } 
}

@keyframes open {
  0% {
    transform-origin: 128px 30px;
  }
  25%{
    transform-origin: 128px 30px;
    transform: rotate(-120deg);
  }
  50% {
    transform-origin: 128px 30px;
    transform: rotate(-70deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  } 
}