menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/07/26
  • CSS

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

ctc1
マウスホバーした際にCSSのみでテキストの色を左から右へ色を変えるアニメーションです。マウスホバー時簡単に、ちょっとインパクトのある演出ができます。

使用方法

DEMO

See the Pen NAYawg by brightonline (@brightonline) on CodePen.0

HTML

要素内にデータ属性で同じテキストを設定します。

CSS

マウスホバーで表示されるテキストはafter擬似要素で設定します。HTMLで設定したデータ属性をafter擬似要素のcontentに指定することによって指定するようにしています。clipプロパティでテキストを切り抜き、transitionでマウスホバー時のアニメーションを設定します。
after擬似要素はabsoluteに設定するので、もとの要素にはrelativeを設定するのを忘れないようにしてください。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11