• 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. borderが横幅からはみ出てしまう

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

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

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

2021年1月
 123
45678910
11121314151617
18192021222324
25262728293031