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

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

最初は簡(jiǎn)単なボタンを作成しましょう -

<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: グラデーション効果を追加する

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

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

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

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

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

円錐勾配の內(nèi)訳

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

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

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

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

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

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

ボーダーボックス

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

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

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

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

<button>WHY CHOOSE US</button>

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

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

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

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

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

ここで、前のセクションとの唯一の違いは、--angle という CSS 変數(shù)を?qū)毪筏郡长趣扦埂?[from var(--angle, 0) は、--angle 値が定義されていない場(chǎng)合、デフォルト値は以前と同じ 0 になることを意味します。] そして、この ---angle 値を 0 から に変更します。 JavaScriptによる360度。その結(jié)果、円錐グラデーションが 0 度から 360 度まで移動(dòng)し、輝く回転効果が得られます。 JavaScript の部分を見てみましょう -

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

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

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

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

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

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

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

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

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

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

X
LinkedIn

以上が回転グローアニメーションを使用して目を引くボタン効果を作成するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。