CSS3の花が咲く（Webページのエフェクトは毎日更新されます）_html/css_WEB-ITnose
今日は、純粋に CSS3 で作成されたエフェクト、咲く花をお届けします。
まず効果を見てみましょう: http://webfront.verynet.cc/pc/flower.html
これは純粋な CSS3 スタイルによって作成された効果です。重要なのは、アニメーション属性を使用して変換することです。属性。詳細については、以下のコードを参照してください。
HTML構造:
1 <div class="div1"></div>2 <div class="div2"></div>3 <div class="div3"></div>4 <div class="div4"></div>5 <div class="div5"></div>6 <div class="div6"></div>7 <div class="div7"></div>8 <div class="div8"></div>9 <div class="div9"></div>
CSSスタイル:
1 <style type="text/css"> 2 .div1{ 3 position:absolute; 4 top:300px;left:500px; 5 background:pink;opacity:0.6;width:300px;height:300px; 6 z-index: 1; 7 border-radius:300px 0px;; 8 -webkit-transform-origin: 0px 300px; 9 -webkit-transform: rotate(-45deg); 10 -webkit-animation:wa1 10s ease 2s infinite alternate; 11 transform-origin: 0px 300px; 12 transform: rotate(-45deg); 13 animation:a1 10s ease 2s infinite alternate; 14 } 15 .div2{ 16 position:absolute; 17 top:300px;left:500px; 18 background:pink;opacity:0.6;width:300px;height:300px; 19 z-index: 2; 20 border-radius:300px 0px;; 21 -webkit-transform-origin: 0px 300px; 22 -webkit-transform: rotate(-45deg); 23 -webkit-animation:wa2 10s ease 2s infinite alternate; 24 transform-origin: 0px 300px; 25 transform: rotate(-45deg); 26 animation:a2 10s ease 2s infinite alternate; 27 28 } 29 .div3{ 30 position:absolute; 31 top:300px;left:500px; 32 background:pink;opacity:0.6;width:300px;height:300px; 33 z-index: 3; 34 border-radius:300px 0px;; 35 -webkit-transform-origin: 0px 300px; 36 -webkit-transform: rotate(-45deg); 37 -webkit-animation:wa3 10s ease 2s infinite alternate; 38 transform-origin: 0px 300px; 39 transform: rotate(-45deg); 40 animation:a3 10s ease 2s infinite alternate; 41 } 42 .div4{ 43 position:absolute; 44 top:300px;left:500px; 45 background:pink;opacity:0.6;width:300px;height:300px; 46 z-index: 4; 47 border-radius:300px 0px;; 48 -webkit-transform-origin: 0px 300px; 49 -webkit-transform: rotate(-45deg); 50 -webkit-animation:wa4 10s ease 2s infinite alternate; 51 transform-origin: 0px 300px; 52 transform: rotate(-45deg); 53 animation:a4 10s ease 2s infinite alternate; 54 } 55 .div5{ 56 position:absolute; 57 top:300px;left:500px; 58 background:pink;opacity:0.6;width:300px;height:300px; 59 z-index: 5; 60 border-radius:300px 0px;; 61 -webkit-transform-origin: 0px 300px; 62 -webkit-transform: rotate(-45deg); 63 -webkit-animation:wa5 10s ease 2s infinite alternate; 64 transform-origin: 0px 300px; 65 transform: rotate(-45deg); 66 animation:a5 10s ease 2s infinite alternate; 67 } 68 .div6{ 69 position:absolute; 70 top:300px;left:500px; 71 background:pink;opacity:0.6;width:300px;height:300px; 72 z-index: 6; 73 border-radius:300px 0px;; 74 -webkit-transform-origin: 0px 300px; 75 -webkit-transform: rotate(-45deg); 76 -webkit-animation:wa6 10s ease 2s infinite alternate; 77 transform-origin: 0px 300px; 78 transform: rotate(-45deg); 79 animation:a6 10s ease 2s infinite alternate; 80 } 81 .div7{ 82 position:absolute; 83 top:300px;left:500px; 84 background:pink;opacity:0.6;width:300px;height:300px; 85 z-index: 7; 86 border-radius:300px 0px;; 87 -webkit-transform-origin: 0px 300px; 88 -webkit-transform: rotate(-45deg); 89 -webkit-animation:wa7 10s ease 2s infinite alternate; 90 transform-origin: 0px 300px; 91 transform: rotate(-45deg); 92 animation:a7 10s ease 2s infinite alternate; 93 } 94 .div8{ 95 position:absolute; 96 top:300px;left:500px; 97 background:pink;opacity:0.6;width:300px;height:300px; 98 z-index: 8; 99 border-radius:300px 0px;;100 -webkit-transform-origin: 0px 300px;101 -webkit-transform: rotate(-45deg);102 -webkit-animation:wa8 10s ease 2s infinite alternate;103 transform-origin: 0px 300px;104 transform: rotate(-45deg);105 animation:a8 10s ease 2s infinite alternate;106 }107 .div9{108 position:absolute;109 top:300px;left:500px;110 background:pink;opacity:0.6;width:300px;height:300px;111 z-index: 9;112 border-radius:300px 0px;;113 -webkit-transform-origin: 0px 300px;114 -webkit-transform: rotate(-45deg);115 transform-origin: 0px 300px;116 transform: rotate(-45deg);117 }118 @-webkit-keyframes wa1{119 from{-webkit-transform: rotate(-45deg);}120 to{-webkit-transform: rotate(-125deg);}121 }122 @keyframes a1{123 from{transform: rotate(-45deg);}124 to{transform: rotate(-125deg);}125 }126 @-webkit-keyframes wa2{127 from{-webkit-transform: rotate(-45deg);}128 to{-webkit-transform: rotate(-105deg);}129 }130 @keyframes a2{131 from{transform: rotate(-45deg);}132 to{transform: rotate(-105deg);}133 }134 @-webkit-keyframes wa3{135 from{-webkit-transform: rotate(-45deg);}136 to{-webkit-transform: rotate(-85deg);}137 }138 @keyframes a3{139 from{transform: rotate(-45deg);}140 to{transform: rotate(-85deg);}141 }142 @-webkit-keyframes wa7{143 from{-webkit-transform: rotate(-45deg);}144 to{-webkit-transform: rotate(-65deg);}145 }146 @keyframes a7{147 from{transform: rotate(-45deg);}148 to{transform: rotate(-65deg);}149 }150 @-webkit-keyframes wa4{151 from{-webkit-transform: rotate(-45deg);}152 to{-webkit-transform: rotate(35deg);}153 }154 @keyframes a4{155 from{transform: rotate(-45deg);}156 to{transform: rotate(35deg);}157 }158 @-webkit-keyframes wa5{159 from{-webkit-transform: rotate(-45deg);}160 to{-webkit-transform: rotate(15deg);}161 }162 @keyframes a5{163 from{transform: rotate(-45deg);}164 to{transform: rotate(15deg);}165 }166 @-webkit-keyframes wa6{167 from{-webkit-transform: rotate(-45deg);}168 to{-webkit-transform: rotate(-5deg);}169 }170 @keyframes a6{171 from{transform: rotate(-45deg);}172 to{transform: rotate(-5deg);}173 }174 @-webkit-keyframes wa8{175 from{-webkit-transform: rotate(-45deg);}176 to{-webkit-transform: rotate(-25deg);}177 }178 @keyframes a8{179 from{transform: rotate(-45deg);}180 to{transform: rotate(-25deg);}181 }182 </style>まず、正方形のボックスを作成し、border-radius属性で丸い境界線を制御して、花びらの効果を表示します。調整した花びらの頂点は右上隅にあるため、垂直にするには反時計回りに 45 度回転する必要があります。次に、アニメーション効果を定義する必要があります。この例では、Webkit ベースのブラウザーと標準ブラウザーのみを構成します。他のブラウザーとの互換性を設定する必要がある場合は、アニメーション効果 @keyfarmes を -o-keyframes (Opera ブラウザー)、@-moz-keyframes (FireFox ブラウザー) に変更できます。 )、@-webkit-keyframes (Safari および Chrome ブラウザー)。アニメーションを定義したら、呼び出すことができます。アニメーション: アニメーション名を使用するだけです。ここでは、パラメータの意味については詳しく説明しません。編集者は、感動するには読者が自分で理解することに委ねるべきだと考えています。
注: このうち、transform 属性やtransform-origin などの属性は、上記のように、対応するブラウザーのプライベートヘッダーを追加するだけで、さまざまなブラウザーで互換性の問題が発生します。
コードを楽しみ、人生を楽しみ、Webページの効果を毎日更新します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7535
15
1379
52
82
11
21
86
ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する
Apr 03, 2024 am 08:13 AM
スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました
EdgeブラウザのショートカットとしてWebページをデスクトップに送信するにはどうすればよいですか?
Mar 14, 2024 pm 05:22 PM
Edge ブラウザのショートカットとして Web ページをデスクトップに送信するにはどうすればよいですか?多くのユーザーは、アクセスページを直接開くことができるように、頻繁に使用する Web ページをデスクトップにショートカットとして表示したいと考えていますが、その方法がわかりません。この問題に応えて、この号の編集者は大多数のユーザーが解決策を考えているので、今日のソフトウェア チュートリアルで共有されているコンテンツを見てみましょう。 Edge ブラウザで Web ページをデスクトップに送信するショートカット方法: 1. ソフトウェアを開き、ページ上の「...」ボタンをクリックします。 2. ドロップダウン メニュー オプションから [アプリケーション] で [このサイトをアプリケーションとしてインストールする] を選択します。 3. 最後に、ポップアップウィンドウでそれをクリックします
ネットワーク接続は正常であるにもかかわらず、ブラウザが Web ページにアクセスできない場合の考えられる理由
Feb 19, 2024 pm 03:45 PM
ブラウザは Web ページを開けませんが、ネットワークは正常です。多くの理由が考えられます。この問題が発生した場合は、段階的に調査して具体的な原因を特定し、問題を解決する必要があります。まず、Web ページを開けないのは特定のブラウザに限定されているのか、それともすべてのブラウザで Web ページを開けないのかを判断します。 1 つのブラウザだけで Web ページを開けない場合は、テストのために Google Chrome、Firefox などの他のブラウザを使用してみることができます。他のブラウザでページを正しく開くことができる場合、問題はその特定のブラウザにある可能性があります。
Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション
Mar 15, 2024 am 10:30 AM
一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスク マネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。
九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル
Mar 28, 2024 am 11:11 AM
ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。
Webページが開けない場合の対処法
Feb 21, 2024 am 10:24 AM
Web ページが開かない問題を解決する方法 インターネットの急速な発展に伴い、人々は情報を取得し、通信し、娯楽するためにますますインターネットに依存するようになりました。しかし、時々Webページが開けないという問題に遭遇し、多くのトラブルを引き起こします。この記事では、Web ページが開かない問題を解決するための一般的な方法をいくつか紹介します。まず、Web ページを開けない理由を特定する必要があります。考えられる原因には、ネットワークの問題、サーバーの問題、ブラウザの設定の問題などが含まれます。以下にいくつかの解決策を示します: ネットワーク接続を確認します: まず、
春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です
Apr 17, 2024 pm 05:07 PM
春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。
Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度
Mar 28, 2024 pm 03:20 PM
コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナ レベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。
