波効果を作成するための 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タグの書き方でよくある間違い

推薦する

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

HTML の基礎_一般的なタグ、共通タグ、表

パート 1 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要

一般的に言えば、より完全な結果を得るためには、2 つ以上のテーブルから結果を取得する必要があります。...

MySQL の NULL と空の文字列

最近、MySQL に触れました。昨日、テーブル構造情報を格納するための新しいテーブルを作成しました。...

Linux bzip2 コマンドの使用

1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

MySQL サーバー IO 100% 分析および最適化ソリューション

序文ストレス テスト中に、リソース使用のボトルネックによって発生する最も直接的なパフォーマンスの問題...

Reactでaxiosを使用してリクエストを送信する一般的な方法

目次Reactにaxios依存関係をインストールして導入するGETリクエストにaxiosを使用するa...

MySQL トランザクション分離レベルと MVCC の詳細な説明

目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...

自作の Windows サーバーに egg アプリケーションを展開する方法 (画像とテキスト付き)

1. IEブラウザを使用してVPNにログインする 2. リモートログイン 3. サーバーに最新のn...

MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

Xshellの一般的な問題と関連する設定の詳細な説明

この記事では、Xshell と関連する構成の一般的な問題について説明します。この記事の構成は、主に ...

dockerでデプロイされたjenkinsでgitプログラムを実行する際の問題について

1. まず、gitを関連付けるときにエラーメッセージが報告されます: エラー: ビルドするリビジョン...