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() に関する考察
推薦する
CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現
最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...
Nexus を使用して jar パッケージをプライベート サーバーに追加する方法
なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...
ウェブページ作成の基本宣言文書型記述（DTD
CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...
MySQLで判定文を書く方法のまとめ
MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...
js キャンバスはランダムなパーティクル効果を実現します
この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...
HTML の類似タグと属性の違いの詳細な説明
【1】<i></i>タグと<em></em>タグ同じ...
Vue ページ スタック マネージャーの詳細
目次2. 試した方法2.1 キープアライブ2.2 ネストされたルートを持つ CSS 3. 機能説明4...
ハイパーリンクを表示して開く方法
<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...
MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
MySQL データベース データのロード 複数の用途
目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...
イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します
コマンドを実行します: docker run --name centos8 -d centos /b...
CSS でのナビゲーション バーとドロップダウン メニューの実装
1. CSSナビゲーションバー（１）ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...
データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法
この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...
CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する
CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...
MySQLを定期的にバックアップしてQiniuにアップロードする方法
ほとんどのアプリケーション シナリオでは、緊急時に備えて重要なデータをバックアップし、安全な場所に保...