Webサイトのコーディングで、テキストリンクのホバーアニメーションは必ず実装するものです。
下線だけで十分な場合もありますが、サイトのテイストに合わせたホバーアニメーションを実装するとより効果的です。今回は、よく使うテキストリンクのホバーアニメーションを13種類紹介していきます。
共通のHTML・CSS
まずは、共通となるHTMLとCSSはこちらになります。
<a href="#" class="textlink">テキストリンク</a>a {
color: #333;
text-decoration: none;
display: inline-block;
}HTMLはaタグのみとなり、CSSはデフォルトのスタイルの打消し等を行っています。
フォントサイズや太さは用途に応じて変更してください。
透過する
まずは基本中の基本であるホバー時に透過する方法です。
テキストよりも画像などのホバー時に使用する方が多いかもしれません。
.textlink {
transition: opacity 0.5s;
}
.textlink:hover {
opacity: 0.5;
}▼ テキストホバーでアニメーション
文字色の変更
こちらもオーソドックスなホバーアニメーションです。ホバー時に文字色が変更になります。
.textlink {
transition: color 0.5s;
}
.textlink:hover {
color: #4D98BF;
}▼ テキストホバーでアニメーション
文字色と背景色の変更
ホバー時に文字色に加え、背景色も変更となります。
paddingプロパティで余白を設定しています。
.textlink {
padding: 10px;
transition: color 0.5s, background-color 0.5s;
}
.textlink:hover {
color: #FFF;
background-color: #4D98BF;
}▼ テキストホバーでアニメーション
文字色の変更と背景色が左から右に流れる
ホバー時に文字色の変更に加えて、背景色が左から右に流れます。
.textlink {
padding: 10px;
background-image: linear-gradient(#4D98BF, #4D98BF);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 100%;
transition: color 0.5s, background-size 0.5s;
}
.textlink:hover {
color: #FFF;
background-position: bottom left;
background-size: 100% 100%;
}▼ テキストホバーでアニメーション
下線が左から右へ流れる
ホバー時に下線が左から右に流れるよに表示されます。
backgroundプロパティでグラデーションを使用しています。
.textlink {
padding-bottom: 5px;
background-image: linear-gradient(#333, #333);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 1px;
transition: background-size 0.3s;
}
.textlink:hover {
background-position: bottom left;
background-size: 100% 1px;
}▼ テキストホバーでアニメーション
下線が右から左へ流れる
ホバー時に下線が右から左に流れるよに表示されます。
backgroundプロパティでグラデーションを使用しています。
.textlink {
padding-bottom: 5px;
background-image: linear-gradient(#333, #333);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0 1px;
transition: background-size 0.3s;
}
.textlink:hover {
background-position: bottom right;
background-size: 100% 1px;
}▼ テキストホバーでアニメーション
下線が中央から広がる
ホバー時に下線が中央から広がるように表示されます。
backgroundプロパティでグラデーションを使用しています。
.textlink {
padding-bottom: 5px;
background-image: linear-gradient(#333, #333);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 1px;
transition: background-size 0.3s;
}
.textlink:hover {
background-position: bottom left;
background-size: 100% 1px;
}▼ テキストホバーでアニメーション
文字間が広がる
ホバー時にletter-spacingプロパティを変更し、文字間が広がります。
.textlink {
transition: letter-spacing 0.5s;
}
.textlink:hover {
letter-spacing: 0.1em;
}▼ テキストホバーでアニメーション
拡大する
ホバー時にtransformプロパティの値scaleで拡大しています。
.textlink {
transition: transform 0.5s;
}
.textlink:hover {
transform: scale(1.1);
}▼ テキストホバーでアニメーション
縦に回転する
ホバー時にtransformプロパティの値rotateXで縦回転させています。
.textlink {
transition: transform 0.5s;
}
.textlink:hover {
transform: rotateX(360deg);
}▼ テキストホバーでアニメーション
横に回転する
ホバー時にtransformプロパティの値rotateYで横回転させています。
.textlink {
transition: transform 0.5s;
}
.textlink:hover {
transform: rotateY(360deg);
}▼ テキストホバーでアニメーション
上に移動する
ホバー時にtransformプロパティの値translateYで上に移動させています。
.textlink {
transition: transform 0.5s;
}
.textlink:hover {
transform: translateY(-5px);
}▼ テキストホバーでアニメーション
文字をぼかす
ホバー時にfilterプロパティの値blurでぼかしています。
.textlink {
transition: filter 0.5s;
}
.textlink:hover {
filter: blur(5px);
}▼ テキストホバーでアニメーション
さいごに
いかがでしたでしょうか。
今回は、よく使うテキストリンクのホバーアニメーション13種を解説しました。
ホバーアニメーションを使う事で、サイトの印象ががらっと変わります。サイトに合ったホバーアニメーションを実装するように心がけましょう。
