ベースHTML
ベースのHTMLです。っていっても基本aタグだけです。
html
<a href="#" class="btn01">BUTTON</a>
1.くるくるって回るアニメーション
くるくるっと２回転するアニメです。
くるっと１回転の場合は「rotate」を360にすればOKです。
css
.btn01 {
color: #fff;
text-decoration: none;
background-color: #dda0dd;
display: block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
/* ここで動く速度とか設定 */
transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.btn01:hover {
transform: rotate(720deg);
-webkit-transform: rotate(720deg);
}
デザインてきな処理で長くなってますけど、動き自体は「transition」とhoverの「transform」です。
最近のFirefoxとかIEではベンダープレフィクスいらないけど、ChromeとかWebkit系列ではまだまだ必要なようです。
ちなみに「border-radius: 50%;」でまん丸にできます。
2.ぶるぶるぶるって振動する
ぶるぶるぶるぶるぶるぶるです。
css
.btn02 {
color: #fff;
display: block;
text-decoration: none;
background-color: #dda0dd;
width: 150px;
padding: 30px 0;
}
.btn02:hover {
animation: shake 0.2s linear infinite;
-webkit-animation: shake 0.2s linear infinite;
}
@keyframes shake {
0% { transform: translate(3px, 2px) rotate(0deg); }
10% { transform: translate(-2px, -3px) rotate(-1deg); }
20% { transform: translate(-4px, 0px) rotate(1deg); }
30% { transform: translate(0px, 3px) rotate(0deg); }
40% { transform: translate(2px, -2px) rotate(1deg); }
50% { transform: translate(-2px, 3px) rotate(-1deg); }
60% { transform: translate(-4px, 2px) rotate(0deg); }
70% { transform: translate(3px, 2px) rotate(-1deg); }
80% { transform: translate(-2px, -2px) rotate(1deg); }
90% { transform: translate(2px, 4px) rotate(0deg); }
100% { transform: translate(2px, -3px) rotate(-1deg); }
}
Webkitに対応するには「@-webkit-keyframes」も同じように作ってください。
「animation」の4つ目を「infinite」にすることで永久に動き続けます。
揺れがあまい！ って人は「@keyframes」の値を大きくしてやるといいです。
3.アイコンが拡大する
設定したアイコン（背景画像）を拡大させてみます。
拡大するだけじゃつまらないので全体的に動かしたりもしてみました。
テキストも動かしたかったので、spanを挟んでます。
html
<a href="#" class="btn03"><span>BUTTON 03</span></a>
css
.btn03 {
color: #fff;
text-decoration: none;
background: #9EB8F3;
width: 280px;
padding: 30px 20px;
position: relative;
overflow: hidden;
text-align: center;
display: block;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn03:hover {
background-size: 100px 100px;
background-position: right 50%;
background-color: #799CEE;
}
.btn03::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 30px;
background: url("img/icon.png") no-repeat 0 50%;
background-size: 38px 38px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn03:hover::before {
left: 240px;
background-size: 80px 80px;
}
.btn03 span {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn03:hover span {
margin-left: -180px;
}
アイコンの付け方は色々あると思いますが、ここでは「::before」の「background」で設定してます。
最近だとwebfontを使用した方がスマートかもしれないですね。
あとは「background-size」を大きくするだけですね。
4.枠線のアニメーション
枠線を拡大したりするアニメーション。
css
.btn04 {
color: #fff;
text-decoration: none;
text-align: center;
position: relative;
z-index: 10;
display: block;
width: 150px;
height: 150px;
line-height: 150px;
}
.btn04::before {
content: '';
background-color: #dda284;
display: block;
position: absolute;
width: 150px;
height: 150px;
z-index: -1;
border-radius: 50%;
box-shadow:
0 0 0 0 #fff,
0 0 0 0 #dda284;
transition: all .2s ease;
-webkit-transition: all .2s ease;
}
.btn04:hover::before {
transform: scale(0.8);
-webkit-transform: scale(0.8);
box-shadow:
0 0 0 25px #fff,
0 0 0 27px #dda284;
}
「border」のオフセットとかはないっぽいので、「box-shadow」で擬似的に枠線っぽくします。
5.くるっと奥に１回転
3D的にz軸に１回転でアニメーションします。
IEだとあまりいい動きしません。
html
<a href="#" class="btn05">
<span class="front">BUTTON</span>
<span class="back">BUTTON</span>
</a>
css
.btn05 {
color: #fff;
display: block;
text-decoration: none;
width: 200px;
position: relative;
perspective: 300px;
-webkit-perspective: 300px;
}
.btn05 span {
text-align: center;
display: block;
width: 200px;
padding: 30px 0;
background-color: #a7dd7d;
position:absolute;
top: 0;
margin-top: -30px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: 0.8s;
}
.btn05 .back {
background-color: #61a84d;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.btn05:hover .front {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.btn05:hover .back {
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
keyframesを使えばもっと表現が増えそうな気がしますが、マウスアウトの処理はJSを使用しないと上手くいかない気がします。どうなんすかね。
