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

Tweet

238

CSS Shimmer Text Effect
By redouglas

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

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

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

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

Tweet

短縮URL:

2014年03月14日 WEB制作系 コード・プラグイン CodePen