CSSで波状の形状とパターンを作成する方法

CSSで波形を作成することは課題になる可能性があります。多くの場合、border-radius属性と多数の近似を使用して波効果をシミュレートしようとしますが、これは波パターンを扱うとより複雑になる可能性があります。

SVGは波形を作成するためのより効率的な方法ですが、CSSも良い結果を達成することができ、コードは複雑すぎる必要はありません。さらに良いことに、プロセスを簡素化するためにオンラインジェネレーターを提供します！

ジェネレーターを使用して、生成されたCSSコードには2つの勾配と1つのCSS maskプロパティのみが含まれていることがわかります。これがすべてであり、さまざまな波形とパターンを作成できます。さらに、波のサイズと曲率を簡単に制御できます。

いくつかの値は「魔法の数字」のように見えるかもしれませんが、実際にはその背後には論理的な根拠があります。コードを分析し、波を作成するすべての秘密を明らかにします。

この記事は、さまざまなジグザグ、範囲制限、スカラップ、および波状の境界線の作成に関する以前の記事のフォローアップです。ここで説明するのと同じ手法を使用しているので、その記事を読むことを強くお勧めします。

波の背後にある数学的原理

厳密に言えば、波形を作成する魔法の式はありません。上部と下の曲線を持つ形状は波と呼ばれるため、複雑な数学的計算に自分自身を制限することはありません。代わりに、幾何学的基盤を使用して波を再現します。

2つの円形の形を使用した簡単な例から始めましょう。

互いに隣接する同じ半径を持つ2つの円があります。その赤い線を見たことがありますか？第1ラウンドの上半分と第2ラウンドの下半分をカバーします。今、あなたがその線を取り、それを繰り返すと想像してください。

波が見られました。次の結果を取得するには、下部（または上部）セクションに記入しましょう。

見て！波の形状を取得し、変数を使用して円の半径を制御できます。これは、私たちが作成できる最も簡単な波の1つであり、以前の投稿で示した波です。

最初の伝説を取り、円を少し動かして複雑さを追加しましょう：

同じ半径の2つの円がまだありますが、水平方向に整列していません。この場合、赤い線は各円の面積の半分を覆うのではなく、より小さな領域を覆っています。この領域は、点線の赤い線によって制限されています。線は、2つの円が出会うポイントを通過します。

その線を取り、繰り返すと、別の波、より滑らかな波が得られます。

あなたが理解していると思います。円の位置とサイズを制御することにより、必要な波を作成できます。それらの変数を作成することもできます。これはそれぞれPとSを呼び出します。

オンラインジェネレーターでは、波を制御するために2つの入力を使用していることに気付いたかもしれません。上記の変数にマッピングされます。 Sは「波のサイズ」であり、Pは「波の曲率」です。

pをp = m*sとして定義します。ここで、mは波の曲率を更新するときに調整する変数です。これにより、Sを更新しても、常に同じ曲率を維持できます。

mは0から2の間の任意の値になります。 0は、2つの円が水平に整列される最初の特別なケースを提供します。 2は最大値です。私たちは大きくなることがありますが、いくつかのテストの後、2を超える値は悪い平らな形状を生成することがわかりました。

円形の形状の半径を忘れないでください！これは、以下に示すように、SとPを使用して定義することもできます。

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

mが0に等しい場合（つまり、pは0に等しい）、r = s/2があります。

これらすべてをCSSの勾配に変換するために必要なすべてがあります！

勾配

を作成します

私たちの波は円を使用しており、円に関しては、放射状の勾配について話しています。 2つの円は波を定義するため、2つの放射状勾配を論理的に使用します。

Pが0に等しい特別なケースから始めます。これは、最初のグラデーションイラストです：

この勾配は、底領域全体を埋めながら、最初の曲率を作成します。間違いなく波の「水」です。

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

変数は、放射状勾配の半径とサイズを定義します。 S変数と比較すると、S/2に等しくなります。 --size

今すぐ2番目の勾配を追加しましょう：

2番目のグラデーションは、波を完成させるための単なる円です：

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

前の投稿を見ると、私がそこでやったことを繰り返していることがわかります。

2つの記事を読みましたが、グラデーション構成は同じではありません。

これは、異なる勾配構成を使用して同じ結果を達成できるためです。 2つの構成を比較すると、わずかに異なるアライメントがあることに気付くでしょうが、トリックは同じです。勾配に慣れていない場合、これは混乱する可能性がありますが、心配しないでください。いくつかのエクササイズを使用すると、それらに慣れてしまい、異なる構文が同じ結果を生成できることがわかります。

これは私たちの最初の波の完全なコードです：

このコードを取り、調整して、必要な波を作成するために完全に使用できる変数を導入しましょう。前のセクションで見たように、主なトリックは円を動かして、それらが整列されなくなるようにすることです。そのため、各円の位置を更新しましょう。最初のものを上に移動し、2番目のものを下に移動します。

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

私たちのコードは次のようになります：

各円の中心位置を定義するために、新しい

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

変数を導入しました。最初のグラデーションは

を使用するため、中心は上方に移動し、2番目の勾配では--pを使用して下向きに移動します。 50% calc(-1*var(--p)) calc(var(--size) var(--p))デモは千の言葉よりも優れています：

サークルは、互いに整列したり触れたりしません。半径を変更せずにそれらを遠くに分離したので、波を失いました。ただし、以前に使用したのと同じ数学的方法を使用して、新しい半径を計算することにより、これらの問題を修正できます。 r = sqrt（p²s²）/2を覚えておいてください。私たちの場合、--sizeはs/2に等しくなります。したがって、中心点間の距離は--pの2倍の高さです。 --p

これにより、55.9pxの結果が得られます。

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

私たちの波が戻ってきました！方程式をCSSに挿入しましょう：

上記のCSSは有効に見えますが、2つの長さを掛けることができないため機能しないため、前のセクションで説明したように、曲率を制御するためにM変数を導入する必要があります。

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

これは非常にクールです。

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

属性を使用して任意の要素に適用できるクール波を取得するには、2つの勾配が必要です。試してみる必要はありません。2つの変数を更新するだけです。

mask逆ウェーブ

波を反対方向に動かせたい場合は、「水」の代わりに「空」を埋めますか？信じられないかもしれませんが、2つの値を更新するだけです。

上記のように、私がしたのは100％に等しいオフセットを追加することだけでした。結果は次のとおりです

よりキーワード値に優しい構文を使用して、簡単にすることを検討する場合があります。

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

およびキーワードを使用して、エッジとオフセットを指定します。デフォルトでは、ブラウザはデフォルトで

および

にデフォルトであり、そのため、100％を使用して要素を下部に移動します。私たちは実際にそれを上から100％移動したので、実際には底を言うのと同じです。数学よりも読みやすい！

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

この更新された構文を使用して、

をleft - およびその逆に置き換えて、波の方向を変更します。 bottom left上部と下の両方の波を取得したい場合は、すべての勾配を1つのステートメントに組み合わせます。 top

コードを確認すると、すべての勾配を組み合わせることに加えて、その高さが100％から51％に減少して、すべて要素の半分をカバーすることがわかります。はい、51％。ギャップを避けるために、小さなオーバーラップを行うには、余分な少しの割合が必要です。

bottom top左側と右側はどうですか？

これはあなたの宿題です！上部と下部で行ったことを利用して、右と左に値を取得するために値を更新しようとします。心配しないでください、それは簡単です、あなたがする必要がある唯一のことは値を交換することです。

<code>R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))</code>

問題がある場合は、オンラインジェネレーターをいつでも使用してコードを確認し、結果を視覚化できます。

...（残りのコンテンツは、言語と式が調整され、写真とコードブロックが保持されることを除いて、元のテキストに似ています）

以上がCSSで波状の形状とパターンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。