まずは効果を見てみましょう: この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花びらを動かすことができれば、9 枚の花びらすべてを作ることができます。それは単に効果の重ね合わせです。 HTML: <セクションクラス="デモ"> <div class="box"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> </div> </セクション> CS: ... コードを表示 体 { 背景色: #000; } .デモ{ マージン:0px 自動; 幅: 500ピクセル; } /*蓮の花びらを入れる容器*/ 。箱 { position: relative;/*花びらは絶対的な位置に配置する必要のあるため、相対的な位置を設定します*/ 高さ: 400px; 上マージン:400px } /*花びらの絶対位置*/ .box .leaf { 位置: 絶対; } /*蓮の花びらを描く*/ .リーフ{ 上マージン:0px; 幅: 200ピクセル; 高さ: 200px; border-radius: 200px 0px;/*花びらの角を作る*/ background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*花びらの色を作る*/ background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*花びらの色を作る*/ 不透明度: .6; フィルター:アルファ(不透明度=50); transform: rotate(135deg);/*花びらを135度回転させる*/ transform-origin: top right;/*花びらの回転原点をリセットします。これは非常に重要です*/ } @キーフレーム表示-2 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(45度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-3 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(65度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-4 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(85度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-5 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(105度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-6 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(165度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-7 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(185度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-8 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(205度); } 100%{ 変換: 回転(135度); } } @キーフレーム表示-9 { 0% { 変換: 回転(135度); } 50% { 変換: 回転(225度); } 100%{ 変換: 回転(135度); } } .leaf:n番目の子(1) { background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*花びらの色を作る*/ } .leaf:n番目の子(2) { アニメーション: show-2 6s easy-in-out infinite; } .leaf:n番目の子(3) { アニメーション: show-3 6s easy-in-out infinite; } .leaf:n番目の子(4) { アニメーション: show-4 6s easy-in-out infinite; } .leaf:n番目の子(5) { アニメーション: show-5 6s easy-in-out infinite; } .leaf:n番目の子(6) { アニメーション: show-6 6s easy-in-out infinite; } .leaf:n番目の子(7) { アニメーション: show-7 6s easy-in-out infinite; } .leaf:n番目の子(8) { アニメーション: show-8 6s easy-in-out infinite; } .leaf:n番目の子(9) { アニメーション: show-9 6s easy-in-out infinite; } 上記は、CSS3 で蓮の花が咲くアニメーション効果を実現する方法の詳細です。CSS3 蓮の花が咲くアニメーションの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: vue3 における vuex と pinia の落とし穴
>>: 実践で遭遇するフロントエンドの基本(HTML、CSS)
レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...
HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...
目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...
最近、Tencent Cloudを使用してサーバーを設定しました。使用中に、tomcatポートにアク...
はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全に...
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...
たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...
1. Vue レスポンシブの使用法を確認する Vue の応答性は、私たち全員がよく知っています。 ...
文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...
背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...
--ホームページのバックアップ1.txtテキスト2. 画像をスキャンする3. PSDデザイン原画(A...
1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...
目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...