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

  2. 画像をhoverして時にズームさせるcssを書こう

  3. リストの前の丸をcssで消してみよう

  4. CSSで画像を背景に貼ってみよう

  5. CSSを使って画面サイズに対応しよう

  6. アコーディオンを作ってみよう

2021年9月
 12345
6789101112
13141516171819
20212223242526
27282930  
Translate »