HTMLとCSSを使ってシャインエフェクトを作成する方法

ウェブサイトにビジュアルエフェクトを追加すると、訪問者にとってより魅力的で興味を引くものになります。ボタンやテキストに追加できるクールなエフェクトの1つに「シャイン」エフェクトがあります。これは、テキスト上をライトが走るようなイリュージョンを与えます。このチュートリアルでは、HTMLとCSSを使ってこのエフェクトを実現する方法を説明します。

ステップバイステップガイド
-------------

まず、ボタンのベーシックなHTMLストラクチャーを見てみましょう。

<a href="https://forfrontend.com" class="btn-shine" target="_blank">Get early access</a>

このHTMLコードは、btn-shine クラスを持つボタンとしてスタイル設定されたリンクを作成します。それでは、シャインエフェクトを作成するためにCSSを追加してみましょう。

CSSでボタンをスタイリングする

次に、シャインエフェクトを実現するためのCSSコードを紹介します。このコードは、shine animations を使ってボタンをより魅力的に見せるために必要な全てを含んでいます。

body {
  background: black;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 48px;
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0%, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

CSSの説明

• バックグラウンドとフォントスムージング: bodyはブラックのバックグラウンドを持ち、モダンな印象を与えるために「ポピンズ」フォントを使用しています。フォントスムージングにより、異なるデバイスでのテキストレンダリングが向上します。

• ポジショニング: ボタンは、(position: absolute、top: 50%、left: 50%)、およびtransform: translate(-50%, -50%)を使用してスクリーンのセンターに絶対配置されています。

• ボタンのスタイル: ボタンには、サイズを調整するためのパディングがあり、ダークグレーからホワイト、そして再びダークグレーに変わるグラデーションバックグラウンドを使用しています。このグラデーションがシャインエフェクトを生み出します。

• テキストクリッピング: background-clip: textプロパティは、テキストにグラデーションバックグラウンドをクリップし、-webkit-text-fill-color: transparentによってボタンの残りの部分をトランスペアレントにし、テキストのみがグラデーションを表示します。

• アニメーション: @keyframesルールは、3秒間にわたってグラデーションバックグラウンドをテキスト上に左から右にムーブするshineというアニメーションを定義しています。このようなshine animationsは、animation: shine 3s infinite linearで無限にループするようセットされています。

結論

これらのステップに従うことで、ウェブサイトのボタンやテキストに魅力的なシャインエフェクトを追加できます。このエフェクトは、サイト内の重要なエレメントに注目を集めるための素晴らしい方法です。異なるカラーやアニメーションのデュレーションを試して、ブランドに合ったユニークなスタイルをクリエイトしてみましょう。