HTML CSSとJavaScriptを使用したブラックホールアニメーション-jsチュートリアル-php.cn

HTML CSSとJavaScriptを使用したブラックホールアニメーション

Mary-Kate Olsen

リリース： 2025-01-27 12:33:10

オリジナル

982 人が閲覧しました

html、css、およびjavascriptを使用して、クールなブラックユニバースアニメーションを作成します

BLACK HOLE ANIMATION WITH HTML CSS AND JAVASCRIPT

このコードは、魅力的なブラックユニバースアニメーション効果を作成します。コードを徐々に分解して、その機能を理解しましょう。

cssスタイル（ラベルの
<code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黑色宇宙动画</title> <style> /* CSS样式代码 */ </style> </head> <body> <div class="black-hole-container"> <div class="black-hole"></div> <div class="purple-shadow"></div> <div class="stars"></div> </div> <script> // JavaScript代码 </script> </body> </html></code>
ログイン後にコピー
）：

styleCSSコードは、アニメーション要素のスタイルとアニメーション効果を定義します。 バックグラウンドの放射状勾配効果を作成して、宇宙の深さをシミュレートします。

ブラックホールのネオンライトのような照明効果を作成します。キーフレームアニメーション（）は、ブラックホールのライトフラッシュ、紫の影の変動、および星の点滅効果を定義します。

radial-gradient JavaScriptコード（ラベルのbox-shadow）：@keyframes（元の入力はJavaScriptコードを提供していないため、アニメーションを補充する必要があります）JavaScriptコードは星を作成する責任があります動的に、ランダムなランダムは、星と点滅アニメーションの位置を設定します。

このアニメーション効果は、CSSのグラデーション、シャドウ、アニメーション、およびJavaScriptの動的要素の作成を通じて作成され、没入型の宇宙空間感覚を作成します。ブラックホールの中心は純粋な黒で、グラデーションピンク、紫、青のハローに囲まれており、神秘的で美しい視覚効果を生み出します。背景のちらつきの星は、宇宙の雰囲気をさらに高めます。紫色の影の変動は、アニメーションに動的と活力を加えます。完全なJavaScriptコードにより、星が動的に生成され、フラッシュされ、アニメーションがより鮮明になります。

以上がHTML CSSとJavaScriptを使用したブラックホールアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。