モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果はキャンバスを使用してのみ作成できると思っていましたが、後で CSS を使用しても作成できることが分かりました。 原則: まずは効果図を見てみましょう。 //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標準の学習
目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...
この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...
この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...
watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...
目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...
問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...
この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...
js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...
tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...
Alibaba Cloud yum コマンドでのデフォルトの MySQL バージョンは 5.17**...
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
例えば:コードをコピーコードは次のとおりです。 <input type="check...
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...
相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...