CSSを使用して円形の波効果を実現する

CSSを使用して円形の波効果を実現する

モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果はキャンバスを使用してのみ作成できると思っていましたが、後で CSS を使用しても作成できることが分かりました。

原則: border-radius:50%設定すると、円になることは誰もが知っています。50% 未満の場合、実際には不規則な円になります。この機能を利用して、疑似クラスと変換アニメーションを使用して波の効果を実現できます。

まずは効果図を見てみましょう。

//CSSコード

.wave {
        位置: 相対的; 
    幅: 200ピクセル;
    高さ: 200px;
    背景: @color;
    境界線: 5px 実線 #76daff;
    境界線の半径: 50%;
    オーバーフロー: 非表示;
}
.wave-box::before、
.wave-box::after {
      コンテンツ: '';
      位置: 絶対;
      上: 0;
      左: 50%;
      幅: 400ピクセル;
      高さ: 400px;
      境界線の半径: 45%;
      -webkit-transform: translate(-50%, -70%);
      変換: translate(-50%, -70%);
      背景: rgba(255, 255, 255, 0.5);
      -webkit-animation: 10 秒間、線形無限回転します。
      アニメーション: 10 秒の線形無限回転;
      zインデックス: 10;
}
@keyframes 回転 {
  50% {
            -webkit-transform: 変換(-50%, -75%) 回転(180度);
            変換: 移動(-50%, -75%) 回転(180度);
  }
  100% {
            -webkit-transform: 変換(-50%, -70%) 回転(180度);
            変換: 移動(-50%, -70%) 回転(180度);
  }
}
//または、プリコンパイルされた言語を使用する方が便利です。ここでは、より少ない
.wave(@width; @height; @color) {
    位置: 相対的; 
    幅: @width;
    高さ: @height;
    背景: @color;
    境界線: 5px 実線 @color;
    境界線の半径: 50%;
    オーバーフロー: 非表示;
    &::前に、
    &::後 {
        コンテンツ: '';
        位置: 絶対;
        上: 0;
        左: 50%;
        幅: @width * 2;
        高さ: @height * 2;
        境界線の半径: 45%;
        変換: translate(-50%, -70%);
        背景: rgba(255,255,255,0.5);
        アニメーション: 10 秒の線形無限回転;
        zインデックス: 10;
    }
    &::後 {
        境界線の半径: 47%;
        背景: rgba(255,255,255,0.5);
        アニメーション: 10 秒回転、線形 -5 秒無限;
        zインデックス: 20;
    }
}
//.wave-boxを呼び出す{
    .wave(200px; 200px; #76daff);
}
<!-- ページ上で呼び出されます -->
<div class="wave-box"></div>

要約する

上記は、CSS を使用して円形の波効果を実現する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

>>:  構造とプレゼンテーションの分離を理解するためのWeb標準の学習

推薦する

Nodejs モジュール システムのソースコード分析

目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...

JS でカルーセル効果を実現する 3 つの簡単な方法

この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...

MySQL 基本チュートリアル パート 1 MySQL5.7.18 のインストールと接続チュートリアル

この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...

Vue2 と Vue3 でウォッチ リスナーを使用する方法

watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

Linux の Makefile とは何ですか? どのように機能しますか?

この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...

JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...

Alibaba Cloud ECS centos6.8 に MySql5.7 をインストールして設定するチュートリアル

Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...

Linux C ログ出力コード テンプレート サンプル コード

序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...

画像をラベルとして使用すると、IE では for 属性が機能しません。

例えば:コードをコピーコードは次のとおりです。 <input type="check...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...