• css

hoverした時に文字の間隔をつかってアニメーションしてみよう

はじめに

文字などをhoverした時のアニメーションで何かいいエフェクトないですかね・・
文字の間隔をhoverした時に調整して見たらいかがですか?
それは良さそうですね。hoverした際に、文字を掴んでいるようなイメージにもできそうですし
サンプルを作って見ましょうか。

hoverした時に文字間を変更してアニメーションしよう

テキスト文字をhoverした時に文字間を調整するアニメーションをご紹介していきたいと思います。
考え方は、非常に簡単で、hoverした時にletter-spacingをつかって文字間を調整します。
その際、transitionを使うことで、変化までの時間を指定することでより滑らかに文字間が詰まったり広がったりする物を目指します。

サンプルコード

<div class="lt1em">見出し</div>
.lt1em{
 transition:0.5s all;
 letter-spacing:1em;
 text-align:center;
 font-size:24px;
}
.lt1em:hover{
 letter-spacing:0.5em;
 transition:0.5s all;
}

実装例

hoverした時に文字間が詰まるような動きをするようになりました。
このようにすることで、hoverエフェクトした時の文字にしまりが出ますね。

見出し

関連記事

  1. 特定の番号の要素のcssだけ変更してみよう

  2. CSSで見出しを飾りつけよう

  3. cssで矢印を作ろう

  4. CSS講座 – 文字の色を変えてみよう –

  5. cssでマウスをおいた時に動かそう

  6. テキスト文字を中央、左右にcssで寄せよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930