[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation

シンプルなHTMLでサークル状に実装したエレメントのホバー時に、かわいいアニメーションを与えるスタイルシートを紹介します。

実際の動作は、下記ページで確認できます。
Chrome, Firefoxなどのブラウザでご覧ください。

CSS3 Circle Animation

アイデアの元となったのは、こちらのサイトの中央のサークル。

Vibrant Villages

サークルのアニメーションは、ここではjQueryとちょっと複雑なHTMLが使用されています。

HTML: 参考

<div class="big-circle">
  <div class="text-block">
    <h6>Welcome to</h6>
    <h4>Vibrant Villages</h4>
    <h6>New Hampshire</h6>
    <h1>inform<br/>inspire<br/>implement</h1>
  </div>
  <ul class="circle">
    <li><span class="orange"><span class="blue"></span></span></li>
  </ul>
</div>

CSS3 Circle Animationでは、HTMLをシンプルし、さらにCSSのみで実装してみようとしたソリューションです。

HTML

デモのHTMLは非常にシンプルです。

<div class="circle">
  <span>Hover</span>
</div>

CSS

jQeuryなどのスクリプトは無しで、アニメーションは動作します。

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #fafafa;
  color: #0f0f0f;
  font: normal 0.8125em "Open Sans", sans-serif;
}

a {
  color: #14b0e3;
}

.container {
  width: 340px;
  margin: 120px auto 0;
}

.circle {
  background: #14b0e3;
  width: 120px;
  height: 120px;
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  float: left;
  cursor: pointer;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px;
  border-radius: 120px;
}
.circle:before {
  content: '';
  background: #031f28;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  float: left;
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px;
  border-radius: 120px;
  -webkit-transition: all 220ms linear;
  -moz-transition: all 220ms linear;
  transition: all 220ms linear;
}
.circle:hover:before {
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
}
.circle span {
  color: #031f28;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 40%;
  float: left;
}
.circle:hover span {
  color: #fff;
}