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() に関する考察
推薦する
Ubuntuサーバーの一般的なコマンドの概要
以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...
VMware および CentOS システムのインストール方法 - ルート パスワードをリセットする
今日のタスク1. Linuxディストリビューションの選択2.vmwareが仮想マシン（centos）...
Vueは指定された日付間のカウントダウンを実装します
この記事では、指定された日付間のカウントダウンを実装するためのVueの具体的なコードを例として紹介し...
HTMLはWEB標準の開発の中心的な基盤です
HTML 中心のフロントエンド開発は、ほぼ Web 標準の意味です。共通しているのは「分離」という考...
独自のサーバーを素早く構築する方法の詳細なチュートリアル（Java 環境）
1. サーバーの購入1. 私はAlibaba Cloudのサーバーを選択しました。学生向けで月額9...
Linux で fdisk を使用してディスクをパーティション分割する方法
Linux パーティションでよく使用されるコマンド: fdisk、MBR パーティション テーブルの...
MySQL データベースの必須条件クエリ ステートメント
目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...
非ルートユーザーを使用してDockerコンテナでスクリプト操作を実行する
アプリケーションをコンテナ化した後、Docker コンテナを起動すると、デフォルトで root ユー...
JSインターセプト文字列の3つの方法の詳細な説明
JS には、文字列をインターセプトするための 3 つのメソッド、 slice() 、 substri...
一般的な JavaScript メモリ エラーと解決策
目次1. タイマー監視2. イベント監視3.オブザーバー4. ウィンドウオブジェクト5. DOM参照...
Gearman + MySQL による永続化操作例
この記事では、gearman+mysql メソッドを使用して永続化操作を実装します。ご参考までに、詳...
Linux で複数の mysql5.7.19 (tar.gz) ファイルをインストールする方法
LinuxでのMySQL-5.7.19バージョンの初心者向けの最初のインストールについては、前の記事...
Dockerの基本的な手順
目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...
WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法
必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...
jQueryで劇場の座席選択と予約の効果を実現
jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...