検索
ホームページウェブフロントエンドCSSチュートリアルCSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

この記事では、CSS を上手に使って波の効果を作成する方法を説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

#この記事では、CSS を使用して実現される別の波効果を紹介します。このアイデアは非常に興味深いものです。

定積分を使用して曲がった三角形の面積から始めます

トピックに入る前に、これを見てみましょう。高度な数学では、次のことができます。定積分を使用して三角形の面積を求め、部分関数の曲線エッジ グラフの面積を求めます。

曲線の下の領域をn個の細長い長方形に分割することができ、nが無限大に近づくと、すべての長方形の面積は曲線エッジ図形の面積に等しくなります。

2 つの簡単な概略図。写真は

から引用したものです。なぜ定積分を使用して面積を求めることができるのでしょうか?

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

n が限りなく無限大に近づくと、すべての長方形の面積は曲線エッジ図形の面積に等しくなります。

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

このアイデアを使用すると、複数の div を使用して CSS で曲線エッジ、つまり波線をシミュレートすることもできます。

ステップ 1. グラフィックを複数の部分にカットします

まず、親コンテナの下に 12 個の子 div を持つ親コンテナを定義できます:

<div class="g-container">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>

flex レイアウトを使用して、単純にレイアウトして、各サブ要素が同じ高さになるようなグラフィックを取得します。

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}

効果は次のとおりです。

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

ステップ 2. 各子要素で、さまざまな負の遅延を使用して高さ変換アニメーションを実行します。

次に、単純な変換を使用して、この画像を動かす必要があります。各子要素の高さを変更することによる実装:

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

効果は次のとおりです:

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

次に、異なる負の遅延を設定するだけです。各子要素のアニメーション シーケンスの時間に応じて、予備的なウェーブ エフェクトを取得できます。ここでの作業負荷を軽減するために、SASS を使用して実装します:

$count: 12;
$speed: 1s;

.g-item {
    --f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

このようにして、予備的なウェーブ エフェクトを取得します:

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

ステップ 3. エイリアスを除去する

ご覧のとおり、上記の波のアニメーションには特定のエイリアスがあります。次にしなければならないのは、これらをできるだけ排除することです。

方法 1: div の数を増やす

最初に定積分を使用して曲線エッジ グラフィックスの面積を求めるという考えに従って、サブ div の数をできるだけ増やすだけで済みます。ただし、div の数が無限になると、ギザギザのエッジが消えてしまいます。

上記の 12 個のサブ div を 120 個に置き換えてみます。120 個の div を 1 つずつ記述するのは大変です。ここでは

Pug テンプレート エンジンを使用します:

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item

CSS コードの場合、アニメーションの遅延時間を変更するだけで済みます。120 個のサブディビジョンの負の遅延は 1 秒以内に制御されます:

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 注意,只有这里发生了变化
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

このようにして、より滑らかな曲線を取得できます。

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

方法 2: ラジアンをシミュレートするには、transform: skew() を使用します

もちろん、実際の状況では、非常に多くの div を使用します。多すぎるのはもったいないので、div数が比較的少ない場合にエイリアシングを極力なくす方法はないでしょうか?

ここでは、ラジアンをシミュレートするために、モーション変換プロセス中に子要素に別の

transform: skewY() を追加してみることができます。

コードを再度変換しましょう。div の数を減らし、

transform: skewY() のアニメーション効果を各サブ div に追加します:

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item

Complete CSS コードは次のとおりです。

$count: 24;
$speed: 1s;

.g-item {
    // 注意,只有这里发生了变化
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {
        height: var(--h);
    }
    to {
        height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {
        transform: skewY(20deg);
    }
    to {
        transform: skewY(-20deg);
    }
}

理解を容易にするために、まず、高さの変換アニメーションが一貫している場合に

skewY() を追加した子 div の変換を確認します。

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

各変換には明らかな突出エイリアシングがあることがわかります。遅延高さ変換を重ね合わせると、エイリアシング効果のほとんどを効果的に除去できます。

現時点では、適度な数の div を使用してアンチエイリアシングを行う別の方法があります。上記のエフェクトすべての完全なコードについては、ここをクリックしてください:

CodePen -- PureCSS Wave Effects

混合使用

最後に、いくつかの可変パラメータを調整して、いくつかの異なる Wave エフェクトを組み合わせることができます。いくつかの組み合わせ効果を得るために一緒に組み合わせると、これも非常に優れています。

こんな感じ:

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

CodePen -- PureCSS Wave Effects 2

これを踏まえると、私はこう思います。会社 (Shopee) の親会社である Sea Group のロゴは次のようになります:

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

この記事のソリューションを使用して、動的なロゴ アニメーションを実装します。 :

CSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッション

CodePen デモ -- PureCSS Wave - Sea Group ロゴ

欠点

#この解決策 欠点は依然として非常に明白です:

  • まず第一に、これは役に立たない div であり、効果を達成するにはより多くの div が必要であり、div が多ければ多いほど、効果は向上します。もちろん、あるレベルまで上げればラグは発生しません。回避された
  • ジャギーを完全に除去することはできません。これが最も致命的であるか、実際に役立つ場所に影響を与えます。

もちろん、この記事の目的はもっと探求することであり、この方法の長所と短所を考え、議論すること、アニメーションを実現するプロセス全体、およびアニメーションの負の遅延時間の使用方法はすべて、何らかの参考になります。そして学習の意義。 CSS は依然として非常に興味深いです ~

元のアドレス: https://segmentfault.com/a/1190000040017751

作者: chokcoco

その他のプログラミング関連知識については、プログラミング ビデオ をご覧ください。 !

以上がCSS を巧みに使用して波の効果を作成するというアイデアについての簡単なディスカッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
2つの画像とAPI:製品のリクロッキングに必要なすべて2つの画像とAPI:製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM

最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます

毎週のプラットフォームニュース:サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響毎週のプラットフォームニュース:サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM

今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます

独自の非JavaScriptベースの分析をホストするためのオプション独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AM

サイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています

それはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するそれはすべて頭の中にあります:Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AM

ドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です

JavaScriptのsuper()とは何ですか?JavaScriptのsuper()とは何ですか?Apr 15, 2025 am 10:59 AM

子のクラスでsuper()?を呼び出すJavaScriptを見たときに何が起こっているのか、Super()を使用して親のコンストラクターとSuperを呼び出します。そのアクセス

さまざまな種類のネイティブJavaScriptポップアップを比較しますさまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AM

JavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名:

アクセス可能なWebサイトが構築が難しいのはなぜですか?アクセス可能なWebサイトが構築が難しいのはなぜですか?Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いです「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります:

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール