ホバーでテキストが上下に回転するアニメーションをHTMLとCSSのみで簡単に実装することができます。
さっそく実装方法をご紹介いたします。
目次
完成イメージ
See the Pen
Untitled by 岸上友希那 (@dnrfjuif-the-looper)
on CodePen.
解説
1. color: transparent;
文字の本来の色を透明にしています。その代わりに text-shadow（文字の影） を使ってテキストを表示させています。つまり「見えているのは影だけ」という仕組みです。
2. text-shadow で影を2つ重ねる
初期状態では以下のような影を設定しています。
text-shadow:
0 -1.5em 0 #000, /* 上にずらした影 */
0 0 0 #000; /* その場の影（実質メインの文字） */- 1つ目の影：本来の文字よりも上にずらした位置に黒い影を描画。
- 2つ目の影：元の位置に黒い影を描画。
この2つを重ねることで「通常の文字」と「上に隠れた文字」の2層構造ができます。
3. ホバー時に位置を切り替える
マウスを載せたときには影の位置を入れ替えます。
text-shadow:
0 0 0 #000, /* 元の位置の文字 */
0 1.5em 0 #000; /* 下にずらした文字 */結果として、「上から下に文字がスライドした」ような効果が生まれます。
4. transition でアニメーション化
transition: text-shadow 0.3s; を指定しているので、影の位置の切り替えがスムーズにアニメーションします。
これによって、パッと切り替わるのではなく、自然に文字が動いて見えるわけです。
とても簡単なのでぜひ取り入れてみてください！
以上、ホバーで回転するリンクテキストの作り方でした。
