検索
ホームページウェブフロントエンド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 までご連絡ください。
Don&#039; t Commaseparate:深いブラウザのサポートが必要な場合はフォーカスでDon&#039; t Commaseparate:深いブラウザのサポートが必要な場合はフォーカスでApr 18, 2025 am 09:25 AM

私は本当に好きです:フォーカスウィチン。それは、子供のいずれかが焦点を合わせているときに基本的に親要素を選択できるようにする非常に便利なセレクターです。

グラフィックデザインのストーリーを語るグラフィックデザインのストーリーを語るApr 18, 2025 am 09:19 AM

これをあなたのためにフレーム化させてください:私たちはスケッチファイルから制作のUIを取得し、それを情報の断片に分解してから構築するつもりです

開発者向けのデザイン原則:より良いWebデザインのためのプロセスとCSSのヒント開発者向けのデザイン原則:より良いWebデザインのためのプロセスとCSSのヒントApr 18, 2025 am 09:12 AM

技術的には誰でも料理ができるのは真実です。しかし、実際においしい食事を準備する方法を知っていることとあなたのように最高のものを望んでいることには違いがあります

Draggin&#039;ドロップピン&#039;反応でDraggin&#039;ドロップピン&#039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェア高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションバックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない&#039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか?ページの上部にスクロールする必要がありますか?Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境