background-clip: text; を使ってグラデーションをアニメーションさせて、文字が光沢しているように見せる テクニック CSS Shimmer Text Effect

PR

CSS Shimmer Text Effect
By redouglas

http://codepen.io/redouglas/pen/gobsm

CSS Shimmer Text Effect

文字に背景画像を割り当てる background: text;を使い、文字に背景として設定してあるグラデーションを表示させています

それをアニメーションさせることで、光が走ったかのような演出をしています

残念ながらIEでは対応していので動作しません
IEではアニメーションの演出が無く、ただ単に見づらいコントラストの文字になってしまっているので実用には色の工夫などが必要そうです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー