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() に関する考察
推薦する
インターフェースなしで Centos7 に JDK と Tomcat をデプロイするチュートリアル
1. xshell6をインストールする2. サーバー接続を作成し、ユーザー名とパスワードを入力します...
Win10でIIS10を構成し、ASPプログラムのデバッグをサポートする手順
マイクロソフトIIS (Internet Information Server) は、Microso...
JavaScriptカスタムオブジェクトメソッドの概要
目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...
VueにExcelテーブルプラグインを導入する方法
この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...
Ubuntuはポート22を開きます
シナリオssh 経由で Ubuntu サーバーに接続するには、xshell ツールを使用する必要があ...
jQueryは時間セレクタを実装する
この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...
ユーザー エクスペリエンス デザイナーとは誰ですか?
怖いですね！ 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...
Vueはカルーセルアニメーションを実装します
この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...
モバイル開発におけるHTML5開発の現状を深く理解する
「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...
Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル
準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...
MySQL SQL ステートメント分析とクエリ最適化の詳細な説明
パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...
ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決
バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...
HTML チュートリアル: よく使われる HTML タグのコレクション (5)
関連記事:初心者が学ぶ HTML タグ (4)導入された HTML タグは、必ずしも XHTML 仕...
TypeScriptの基本型の詳細な説明
目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...
MySQL のデフォルトのストレージ エンジンを変更する方法
mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...