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）