ホバーで色がスライドする
ホバーCSSのみテキストリンクで使える
Text Text
ホバーするとテキストの色がスライドしながら変化するアニメーションです。
実装のポイント
background-clipプロパティで背景色を抜いて文字色にしています。そのためテキストのcolorプロパティはtransparentで透明にする必要があります。
アニメーションのためにbackground-colorプロパティではなくbackground-imageプロパティで色づけて、長さを200%にしているのがミソです。background-positionプロパティを変化させて背景色の位置を変えることで、色がスライドするように見せています。
コード例
HTML
<p class="sampleText">Text Text</p>
CSS
.sampleText {
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
color: transparent;
background-image: linear-gradient(
90deg,
#000 0%,
#000 50%,
orangered 50%,
orangered 100%
);
background-size: 200% 100%;
background-clip: text;
transition: background-position 0.5s var(--ease-out-quart);
background-position: 0 0;
&:hover {
background-position: -100% 0;
}
}