マウスホバーでフェードインするCSS作成ツール
マウスを乗せるとふわっと現れる（色が濃くなる）テキストのCSSジェネレーターです。
プレビュー
<span class="hover-fadein">{{text}}</span>.hover-fadein {
color: {{color}};
font-size: {{size}}px;
font-weight: bold;
opacity: {{opacity}};
transition: opacity {{duration}}s ease;
}
.hover-fadein:hover {
opacity: 1;
}機能・使い方
- マウスホバー時にテキストがふわっとフェードイン（不透明になる）するCSSを作成します。
- 「通常時の不透明度」を0にすると完全に消えた状態から現れ、0.5などにすると半透明から濃くなる演出になります。
- アニメーション時間を調整することで、ゆっくり現れたり、素早く表示させたりできます。
CSSプロパティの説明
opacityプロパティを使って要素全体の不透明度を調整しています。
transitionプロパティを設定することで、ホバー時の透明度変化がアニメーション（徐々に変化）するようにしています。easeは開始と終了を滑らかにする設定です。
