回転グローアニメーションを使用して目を引くボタン効果を作成する

Web サイトが、光る回転効果を持つ目を引くボタンをどのように作成しているか考えたことはありますか?これらの効果はユーザーを魅了し、Web サイトの UI/UX を向上させることができます。 CSS と少しの JavaScript を使用して、段階的に構築する方法を見てみましょう。

ステップ 1: ボタンのレイアウトを作成する

最初は簡単なボタンを作成しましょう -

<button>WHY CHOOSE US</button>

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

このようになります-

ステップ 2: グラデーション効果を追加する

ここで、円錐グラデーションと呼ばれる特別な種類のグラデーションについて話しましょう。聞いたことありますか？線形グラデーションは直線に沿って色を滑らかに遷移させ、放射状グラデーションは円の中心から外側に向かって色をブレンドしますが、円錐形グラデーションは中心点の周りで色を遷移させ、円形または円錐状のパターンを形成します。これは、ダイナミックで視覚的に興味深いデザインを作成するユニークな方法です。

以下の違いを参照してください -

この効果には円錐形のグラデーションを使用します。それをボタンに追加しましょう -

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

CSS スニペットには円錐グラデーションが含まれており、背景のサイズ変更にボーダーボックスを使用しています。何が起こっているかの内訳は次のとおりです:

円錐勾配の内訳

円錐グラデーション(0から、透明、白10%、透明20%):

0 から: グラデーションは 0 度の角度 (円の上部) から始まり、時計回りに進みます。

透明: グラデーションは完全に透明な色で始まります。

白 10%: グラデーションの全周の 10% で、色は白に移行します。

透明 20%: グラデーションの円周の 20% で、透明に戻ります。

このパターンは、透明度に囲まれた白の「スライス」を作成します。

ボーダーボックス

border-box: グラデーションは、要素のコンテンツ、パディング、境界線を含む領域に適用されます。これは、グラデーションが要素のボックス全体を境界線の外側の端まで覆うことを意味します。

このエフェクトを適用すると、ボタンは次のようになります-

ここで、この円錐形のグラデーションをボタンのグラデーションの境界線として使用します。どうすればそれができるでしょうか?

ここではボックスサイジングの力を使います。このボタンの背景を複数作成します。ボタンの上部の背景は無地の背景になり、ボックス サイズとしてパディング ボックスが設定されます。これは、境界線まで伸びないことを意味します。以下のコードを参照してください -

<button>WHY CHOOSE US</button>

これで、コンテンツとパディングを含むボタンを覆う黒い背景ができました。先ほど追加した円錐グラデーションは境界線まで伸びています。境界線は透明なので、円錐形グラデーションの 2 ピクセルの太さが境界線を通して見えていることがわかります。現在、ボタンは次のようになります-

ステップ 3: グラデーションをアニメーション化する

光沢のあるグロー効果をボタンに追加しました。さあ、動かしてみよう。これを行うには、少しの JavaScript が必要です。まず、CSS を更新して、より柔軟で動的なものにします。

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* ... Other styles ... */

ここで、前のセクションとの唯一の違いは、--angle という CSS 変数を導入したことです。 [from var(--angle, 0) は、--angle 値が定義されていない場合、デフォルト値は以前と同じ 0 になることを意味します。] そして、この ---angle 値を 0 から に変更します。 JavaScriptによる360度。その結果、円錐グラデーションが 0 度から 360 度まで移動し、輝く回転効果が得られます。 JavaScript の部分を見てみましょう -

  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;

操作はとても簡単です。 DOM コンテンツがロードされた後、rotate() という関数を呼び出します。この関数は、反復ごとに角度を 1 ずつ増分し、その値をボタンの CSS 変数 --angle に設定します。これにより、最終的に円錐勾配の位置が変わります。 requestAnimationFrame という組み込み関数を使用して、この関数を繰り返し呼び出します。これは、setInterval や setTimeOut のような特別な Javascript 関数です。この requestAnimationFrame 関数について少し詳しく見てみましょう -

内容:
アニメーションを滑らかに保ちます: アニメーションが画面のリフレッシュ レート (通常は 60 フレーム/秒) と同期するため、途切れ途切れに見えなくなります。

電力の節約: ユーザーが別のタブに切り替えるとアニメーションが一時停止され、リソースが節約されます。

最適なタイミングで関数を呼び出します。 更新時期がアニメーション ロジックに通知されるため、すべてが同期されます。

仕組み:
requestAnimationFrame に呼び出す関数 (通常はアニメーション ロジック) を指定します。この関数は、ブラウザが画面上に次のフレームを描画する直前に実行されます。

そして、最終結果が得られます。段階的な変更については、以下のコードペンを参照してください -

これで、CSS と JavaScript を使用して、光る回転ボタンが作成されました。グラデーションやアニメーションの速度を自由に調整したり (どうすればよいか? コメントに残してください)、独自のカスタム効果を追加したりすることもできます。これらのテクニックは、UI を目立たせるための優れた方法です。

クリエイティブな Javascript アニメーションや CSS ボタン効果のアイデアをもっと知りたいですか?コメント欄でお知らせください。次回のブログ投稿もお楽しみに!

ここでも私を見つけることができます-

X
LinkedIn

以上が回転グローアニメーションを使用して目を引くボタン効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。