CSS3で蓮の花が咲くアニメーション効果を実現

CSS3で蓮の花が咲くアニメーション効果を実現

まずは効果を見てみましょう:

この効果は非常に華やかに見えますが、原理は複雑ではありません。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)

推薦する

JS初心者が配列を処理するための実践的な方法のまとめ

join() メソッド: 指定された区切り文字を使用して配列内のすべての要素を文字列に接続します。例...

bashの初期化メカニズムの詳細な説明

Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

MySQL テーブルデータのインポートとエクスポートの例

この記事では、MySQL テーブル データのインポートおよびエクスポート操作について説明します。ご参...

MySQL がデフォルトの分離レベルとして繰り返し読み取りを選択する理由

目次Oracle 分離​​レベルMySQL 分離レベル要約する多くの読者は、MySQL のトランザク...

クリック範囲を拡大する入力チェックボックスを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...

jsはシンプルなショッピングカートモジュールを実装します

この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...

マークアップ言語 - HTML を学んだ後に何を学ぶべきか?

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQLの高可用性アーキテクチャの詳細な説明

目次導入MySQL 高可用性マスター 1 つとバックアップ 1 つ: MySQL マスター スレーブ...

IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...

VUEユニアプリ開発環境についての簡単な説明

目次1. HBuilderXビジュアルインターフェースを通じて2. vue-cliコマンドで実行する...

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

MySQL 5.7.17 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

mysql5.7.17無料インストールバージョンのインストールに関する最近の経験1.ダウンロードして...

HTML で自動ページジャンプを実現する 5 つの方法

前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...