波効果を作成するための CSS のトリック

波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。

波形曲線を実現するにはベジェ曲線が必要だからです。

純粋な CSS を使用してベジェ曲線を実装することに関しては、現時点では良い方法はありません。

もちろん、他の力 (SVG、CANVAS) の助けを借りれば、いわゆる波の効果を簡単に実現できます。

まず、CSS 以外の方法で実現される波の効果を見てみましょう。

SVG 波効果

SVG を使用すると、3 次ベジェ曲線を簡単に描画できます。

<svg 幅="200px" 高さ="200px" バージョン="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!-- 波 -->
    <g id="波">
    <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C145 100、41 100、200 100 A95 95 0 0 1 0 100 Z;
    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
    </パス>
    </g>
    <circle cx="100" cy="100" r="80" ストローク幅="10" ストローク="白" 塗りつぶし="透明"></circle>
    <circle cx="100" cy="100" r="90" ストローク幅="20" ストローク="黄緑" 塗りつぶし="なし" クラス="パーセントパイsvg"></circle>
</svg>

3 次ベジェ曲線の描画の核心は、このセグメントにあります: <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">。興味があれば、自分で調べてみるのもよいでしょう。

キャンバスは波のような効果を実現

キャンバスを使用して波の効果を実現する原理は SVG と同じで、パスを使用して 3 次ベジェ曲線を描画し、アニメーション効果を与えます。

$(関数() {
    キャンバスを $("キャンバス") とします。
    ctx = canvas[0].getContext('2d')とします。
    ラジアン = (Math.PI / 180) * 180 とします。
    startTime を Date.now() とします。
    時間を 2000 とします。
    時計回り = 1 とします。
    cp1x、cp1y、cp2x、cp2y とします。

    // 初期状態 // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 終了状態 // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);

    リクエストアニメーションフレーム(関数 waveDraw() { 
        t = Math.min(1.0, (Date.now() - startTime) / time); とします。

        if(時計回り) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 - (51 * t);
            cp2y = 179 - (79 * t);
        } それ以外 {
            cp1x = 145 - (55 * t);
            cp1y = 100 - (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }

        ctx.clearRect(0, 0, 200, 200); 
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 3次ベジェ曲線を描画します ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 円弧を描画します ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save(); 

        t == 1 の場合
            開始時刻 = Date.now();
            時計回り = !時計回り;
        }

        アニメーションフレームをリクエストします(waveDraw);
    });
})

主に ctx.bezierCurveTo() 3次ベジェ曲線の動的描画を使用して、波の動きの効果を実現します。興味のある方は自分で勉強してください。

波効果を実現するためのCSS

最初に CSS ではこれを実現できないと言っていませんでしたか?はい、3 次ベジェ曲線を直接描画する方法はありませんが、いくつかのトリックを使用して波の動きの効果をシミュレートできます。この方法を見てみましょう。

原理

原理は非常にシンプルです。正方形に border-radius: 50% を追加すると円になることは誰もが知っています。

幅: 240ピクセル;
高さ: 240px;
背景: #f13f84;
境界線の半径: 50%;

わかりました。border-radius が 50% ではないが、50% に近い場合は、次のような形状になります (角に注意してください。形状全体が少し丸みを帯びていますが、完全に丸いわけではありません)。

幅: 240ピクセル;
高さ: 240px;
背景: #f13f84;
境界線の半径: 40%;

さて、そのようなグラフィックを持つことの意味は何でしょうか?波を作ることはできますか?

効果を確認するために、上のグラフィックを回転してみましょう。

波効果を実現するためのCSS

@keyframes 回転{
    {変換: 回転(0度)}から
    {変換:回転(359度)}
}
.リップル{
    幅: 240ピクセル;
    高さ: 240px;
    背景: #f13f84;
    境界線の半径: 40%;
    アニメーション: 3 秒間、直線的に無限回転します。
}

これを見ても回転の目的が分からない人も多いかもしれませんが、よく見ると波のようなうねりがあるのが分かります。

私たちの目標は、この動的に変化する波状のアニメーションを使用して、波のような効果をシミュレートすることです。

成し遂げる

もちろん、ここで見ているのは全体的な実装図なので、あまり分かりにくいです。では、具体的な実装によってどのような効果が得られるのか、例を一つずつ使って見ていきましょう。

上記の原理を使用して、波動背景効果を作成できます。

後ろの浮遊する波の効果は、実際には上記の border-radius: 40% の楕円を使用していますが、何倍にも拡大されています。視野の外側のグラフィックは非表示になっており、視野の片側だけが残され、対応する変換変更がいくつか追加されています。

まだ疑問に思っている生徒もいるかもしれません。では、上記のエフェクトを非表示にして表示し、視野外でアニメーションを完成させましょう。すると、波を生成する原理は次のようになります。

写真の赤いボックスが私たちの実際の視野です。

ここで注目すべきは、回転する楕円自体を使用して波を生成するのではなく、楕円を使用して背景を切り取り、波の効果を生み出すことです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL binlog ログを開く方法

>>:  HTMLタグの書き方でよくある間違い

推薦する

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...

CSSを使用してすべての子要素を選択する方法の詳細な説明

CSS を使用してすべての子要素を再帰的に選択するにはどうすればよいですか?以下の記事では、CSS ...

JDBC 探索 SQLException 分析

1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...

MySQL MHA のセットアップと切り替えに関するいくつかのエラー ログの概要

1: masterha_check_repl レプリカ セット エラー レプリケートが構成ファイルで...

Vue3 AST パーサー - ソースコード分析

目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...

InnoDB テーブルの BLOB 列と TEXT 列のストレージ効率を最適化します。

まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...

DockerはRedis5.0をビルドし、データをマウントします

目次1. 永続データの簡単なマウント2. DockerFileでイメージをビルドし、設定ファイルを指...

Docker Desktop で rocketmq をインストールするための非常に詳細なチュートリアル

Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

vue-router からのフロントエンドルーティングの 2 つの実装

目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...