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() に関する考察
推薦する
Linuxのシグナルメカニズムについての簡単な説明
目次1. シグナルリスト1.1. リアルタイム信号と非リアルタイム信号1.2 信号ステータス1.3 ...
ウェブページ作成における絶対パスと相対パスの違い
1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...
MYSQL接続ポートが占有され、ファイルパスエラーが発生する問題を解決します
今朝、私は Wampserver を使用してローカルの win7 マシン上に PHP 環境を構築し、...
CSS3 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明
Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...
Springboot プロジェクトの Docker-compose イメージリリースプロセス分析
導入Docker-Compose プロジェクトは、Docker コンテナ クラスターの迅速なオーケス...
優れた登録プロセスの手順
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
この記事では、CSSのようなJSモジュールをインポートする方法を説明します。
目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...
Baidu デッドリンクファイルを作成する方法
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
HTML ページジャンプコード
次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...
Linux の特別な権限 SUID、SGID、SBIT の詳細な説明
序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...
MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル
MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...
CSS で隠し要素を実現する 7 つの興味深い方法
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...
Linux の一般的な基本コマンドと使用方法
この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...
Alibaba Cloud Ubuntu 16.04 が IPSec サービスを構築
IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...
CSS で中空マスク レイヤーを実装するサンプル コード
この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...