マウスホバーでテキストを切り替えるCSS作成ツール
マウスホバーでテキストがふわっと切り替わるアニメーションを作成するCSSジェネレーターです。
プレビュー
<span class="hover-text-switch" data-text="{{hover_text}}">{{main_text}}</span>.hover-text-switch {
position: relative;
display: inline-block;
font-size: {{size}}px;
font-weight: bold;
color: {{color}};
text-decoration: none;
transition: color {{duration}}s ease {{duration}}s;
}
.hover-text-switch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: {{color}};
opacity: 0;
transition: opacity {{duration}}s ease;
}
.hover-text-switch:hover {
color: transparent;
transition-delay: 0s;
}
.hover-text-switch:hover::before {
opacity: 1;
transition-delay: {{duration}}s;
}機能・使い方
- マウスホバー時に、新しいテキストがふわっと現れ、元のテキストが消えるアニメーションCSSを作成します。
- HTMLの
data-text属性にホバー等のテキストを設定するだけで機能します。 - リンクボタンや、強調したい見出しの演出などに最適です。
- 元のテキストは、
color: transparentで透明化されるため、背景色やレイアウトに影響を与えずに切り替わります。 - アニメーションが不要な場合、CSSコード内の
transitionプロパティを削除することで、アニメーションを無効にできます。
CSSプロパティの説明
data-textは、HTML要素の属性として、ホバー時のテキストを指定するのに利用しています。
疑似要素::beforeのcontentプロパティにて、data-textの値を定義しています。
ホバー前のテキストをopacityプロパティで操作していない理由は、親要素自体の不透明度を下げてしまうと、子要素である疑似要素（::before）も一緒に透明になってしまうためです。そのため、color: transparent
で文字色のみを透明にすることで対応しています。
また、疑似要素::beforeのtransitionプロパティにて、アニメーションのタイミングを調整しています。
