• 操作
  • エリアホバー

#area hover 015

ホバーでテキストが照らされる

参考サイトURL
動きの解説

暗いテキストの一部にスポットライトが当たったように明るくなる動きは、シネマティックでミステリアスな雰囲気を演出します。高級ブランドやナイトイベントなど、黒背景を基調としたダークモードのデザインにおいて、質感の高いハイライトとなります。background-imageにグラデーションを設定し、background-clip: textで文字の形で切り抜き、その背景位置を動かすことで光の移動を表現します。文字色が透過されている必要があるため、背景色とのコントラスト比を十分に確保することがアクセシビリティ上の要件です。