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)

推薦する

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

電子メールの HTML ページを作成するための原則の概要

HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...

ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...

Tencent Cloud Server Tomcat ポートにアクセスできない場合の解決策

最近、Tencent Cloudを使用してサーバーを設定しました。使用中に、tomcatポートにアク...

ナビゲーションバーコンポーネントをVueでカプセル化する

はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全に...

Docker で Python スクリプトを実行する方法

まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...

Vue2.x の応答性の簡単な説明と例

1. Vue レスポンシブの使用法を確認する​ Vue の応答性は、私たち全員がよく知っています。 ...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

ウェブページを作成する際に注意すべき点

--ホームページのバックアップ1.txtテキスト2. 画像をスキャンする3. PSDデザイン原画(A...

Dockerが正常に起動しない原因と解決策を詳しく解説

1. Docker 起動時の異常なパフォーマンス: 1. ステータスが繰り返し再起動している場合は、...

JavaScript配列の重複排除のいくつかの方法についての詳細な説明

目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...