CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード
|
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです
HTML:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<link rel="stylesheet" href="css/ウォーターポロ効果.css">
</head>
<本文>
<div class="main">
<div class="wave">
</div>
</div>
</本文>
</html>CS: ...
*{
マージン: 0;
パディング: 0;
}
体{
高さ：100vh;
背景: 線形グラデーション(rgb(95,95,250)10%,rgb(3,3,110));
}
.main,.wave{
幅: 200ピクセル;
高さ: 200px;
境界線の半径: 50%;
位置: 絶対;
左: 50%;
上位: 50%;
変換: translate(-50%,-50%);
}
。主要{
border:3px solid darkturquoise;
パディング: 10px;
}
。波{
背景: ダークターコイズ;
オーバーフロー: 非表示;
}
.wave:after{
コンテンツ： "";
幅: 300ピクセル;
高さ: 300px;
背景: rgba(255, 255, 255, 0.8);
位置: 絶対;
左: 50%;
上: 0;
変換: translate(-50%,-60%);
境界線の半径: 40%;
アニメーション: 波 5 秒 線形無限;
}
.wave::before{
コンテンツ:"ウォーターボール";
位置: 絶対;
左: 50%;
上: 0;
色: ダークターコイズ;
zインデックス: 99;
変換: translate(-50%,30px);
}
@keyframes 波{
100%{
変換: 移動(-50%,-60%) 回転(360度);
}
}要約する これで、CSS で波打つ水球効果を実装するサンプル コードに関するこの記事は終了です。CSS で波打つ水球に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: Linux カーネルの copy_{to, from}_user() に関する考察
推薦する
MySQL に絵文字を保存するときに表示されるエラー メッセージ「java.sql.SQLException: 文字列値が正しくありません:'\xF0\x9F\x92\xA9\x0D\x0A...'」の解決方法
序文この記事では主に、MySQL ストレージ テーブル エラー「java.sql.SQLExcept...
MySQL のデータ型とスキーマの最適化の詳細な説明
現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...
MySQLのインデックス設計の原則と一般的なインデックスの違いについて簡単に説明します。
インデックス定義: ディスク上に保存される個別のデータベース構造であり、データ テーブル内のすべての...
WeChatアプレットは記録機能を実装します
この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...
フローティングカスタマーサービス効果を実現するCSS
<div class="サイドバー"> <div> &...
Reactは二次的連鎖効果（階段効果）を実現する
この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...
Linux での MySQL 5.7.18 バイナリ パッケージのインストール チュートリアル (デフォルトの構成ファイル my_default.cnf なし)
現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...
Vue+ElementUI で超大規模なフォーム例を処理する方法
最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...
VirtualBox は CentOS7 仮想マシンと拡張ツールをインストールします (画像とテキスト)
コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...
Linux gccコマンドの具体的な使い方
01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...
Vue はシームレスなカルーセル効果を実現
この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを参考までに紹介します...
選択/フォーカス時にすべてのオプションをリストする現在のより良い方法
開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...
MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明
目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...
ウェブページ制作時のコードコメントの書き方
<br />私の仕事で使用しているアノテーションの書き方の基準をまとめました。技術的な内...
MySQLの指定順序ソートクエリについての簡単な説明
最近、空港や駅でフライト情報を表示するものと似た大型スクリーンディスプレイのプロジェクトに取り組んで...