太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回っています。惑星は単色で、今のところ自転しません。

効果静止画像:

アニメーションには、太陽と惑星、それらの軌道、惑星の公転アニメーションが含まれます。

まずスケッチを描き、サイズと位置を設計し、軌道周期に基づいてアニメーションの実行時間を計算します。

HTMLの構造:

太陽系のコンテナ要素として solarsys クラスを持つ div。この div の位置は相対的です。

惑星軌道と惑星は両方とも div を使用し、位置は絶対です。

コンテナは相対配置を使用し、内部要素は絶対配置を使用するため、効果を実現するのは比較的簡単です。欠点は、サイズが固定されていることです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div  クラス= "solarsys" >   
  2.          <!--太陽-->   
  3.          < div  クラス= '太陽' > </ div >   
  4.   
  5.          <!--水星の軌道-->   
  6.          < div  クラス= 'mercuryOrbit' > </ div >   
  7.   
  8.          <!--水星-->   
  9.          < div  クラス= '水銀' > </ div >   
  10.   
  11.          <!--金星の軌道-->   
  12.          < div  クラス= 'venusOrbit' > </ div >   
  13.   
  14.          <!--金星-->   
  15.          < div  クラス= '金星' > </ div >   
  16.   
  17.          <!--地球軌道-->   
  18.          < div  クラス= 'earthOrbit' > </ div >   
  19.   
  20.          <!--地球-->   
  21.          < div  クラス= '地球' > </ div >   
  22.   
  23.          <!--火星軌道-->   
  24.          < div  クラス= 'marsOrbit' > </ div >   
  25.   
  26.          <!--火星-->   
  27.          < div  クラス= '火星' > </ div >   
  28.   
  29.          <!--木星の軌道-->   
  30.          < div  クラス= 'jupiterOrbit' > </ div >   
  31.   
  32.          <!--木星-->   
  33.          < div  クラス= 'jupiter' > </ div >   
  34.   
  35.          <!--土星の軌道-->   
  36.          < div  クラス= 'saturnOrbit' > </ div >   
  37.   
  38.          <!--土星-->   
  39.          < div  クラス= 'saturn' > </ div >   
  40.   
  41.          <!--天王星の軌道-->   
  42.          < div  クラス= 'uranusOrbit' > </ div >   
  43.   
  44.          <!--天王星-->   
  45.          < div  クラス= 'ウラヌス' > </ div >   
  46.   
  47.          <!--海王星の軌道-->   
  48.          < div  クラス= 'neptuneOrbit' > </ div >   
  49.   
  50.          <!--ネプチューン-->   
  51.          < div  クラス= 'ネプチューン' > </ div >   
  52.      </div>   

太陽系コンテナ div の CSS:

固定幅、固定高さ、相対配置、ページ内の中央揃え。

CSSコードコンテンツをクリップボードにコピー
  1. .solarsys{
  2.             : 800ピクセル;
  3.             高さ: 800px ;;
  4.             位置:相対的;
  5.             マージン:0自動;
  6.             背景色: #000000 ;
  7.             パディング: 0;
  8. 変換: スケール(1);
  9. }

太陽の div の CSS:

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

色を設定します。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

太陽のハローは、ボックスシャドウの 4 層カラー設定によって実現されます。

CSSコードコンテンツをクリップボードにコピー
  1. 。太陽 {
  2.             : 357px ;
  3.             : 357px ;
  4.             高さ: 90px ;
  5.             : 90px ;
  6.             背景色: rgb (248,107,35);
  7.             境界線の半径: 50%;
  8. ボックスシャドウ: 5px   5ピクセル  10ピクセル  rgb (248,107,35), - 5px - 5px   10ピクセル  rgb (248,107,35), 5px - 5px   10ピクセル  rgb (248,107,35), -5ピクセル  5ピクセル  10ピクセル  rgb (248,107,35);
  9.             位置:絶対;
  10.             マージン:0;
  11. }

惑星軌道 div の CSS:

水星の軌道を想定します。

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

背景色は透明です。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

境界線の種類は点線に設定されています。

境界線の色はグレーに設定されています。

幅を1に設定します。

CSSコードコンテンツをクリップボードにコピー
  1. .水銀軌道{
  2.             : 342.5px ;
  3.             : 342.5px ;
  4.             高さ: 115px ;
  5.             : 115px ;
  6.             背景色:透明;
  7.             境界線の半径: 50%;
  8.             境界線のスタイル:破線;
  9.             境界線の色:グレー;
  10.             位置:絶対;
  11.             境界線の幅: 1px ;
  12.             マージン: 0px ;
  13.             パディング: 0px ;
  14. }

惑星 div の CSS:

水星だとしましょう。

デザインのサイズと位置に応じて、幅、高さ、左、上を設定します。

色を設定します。

境界の半径を 50% 増やすと、正方形を円に変えることができます。

transfrom-origin を、太陽系コンテナー全体の中心点を基準とした現在の div の左上隅の水平および垂直オフセットに設定します。回転アニメーションを追加すると、中心点を中心に回転する効果が得られます。

アニメーションを作成し、回転キーフレームアニメーションを参照して、それを永久に線形に実行します。ここでの実行時間は、惑星の公転周期に基づいて計算されます。

CSSコードコンテンツをクリップボードにコピー
  1. .水銀{
  2.             : 337.5px ;
  3.             : 395px ;
  4.             高さ: 10px ;
  5.             : 10px ;
  6.             背景色: rgb (166,138,56);
  7.             境界線の半径: 50%;
  8.             位置:絶対;
  9. 変換原点: 62.5px   5ピクセル;
  10. アニメーション: 1.5 秒の無限線形回転。
  11. }

キーフレームアニメーションを回転する:

反時計回りに回転します。

CSSコードコンテンツをクリップボードにコピー
  1. @keyframes 回転 {
  2. 100% {
  3. 変換: 回転(-360度);
  4. }
  5. }

基本構造は完成しました。

Chrome でのみテスト済み。

完全なコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>   
  2. <ヘッド>   
  3.      <スタイル>   
  4. .solarsys{
  5. 幅: 800ピクセル;
  6. 高さ: 800px;;
  7. 位置: 相対的;
  8. マージン: 0 自動;
  9. 背景色: #000000;
  10. パディング: 0;
  11. 変換: スケール(1);
  12. }
  13.   
  14. /*太陽*/
  15. 。太陽 {
  16. 左:357px;
  17. 上:357px;
  18. 高さ: 90px;
  19. 幅: 90ピクセル;
  20. 背景色: rgb(248,107,35);
  21. 境界線の半径: 50%;
  22. ボックスの影: 5px 5px 10px rgb(248,107,35)、-5px -5px 10px rgb(248,107,35)、5px -5px 10px rgb(248,107,35)、-5px 5px 10px rgb(248,107,35);
  23. 位置: 絶対;
  24. マージン: 0;
  25. }
  26.   
  27. /*水銀*/
  28. .水銀{
  29. 左:337.5px;
  30. 上:395px;
  31. 高さ: 10px;
  32. 幅: 10px;
  33. 背景色: rgb(166,138,56);
  34. 境界線の半径: 50%;
  35. 位置: 絶対;
  36. 変換の原点: 62.5px 5px;
  37. アニメーション: 1.5 秒の無限線形回転。
  38. }
  39.   
  40. /* 水星の軌道 */
  41. .水銀軌道{
  42. 左:342.5px;
  43. 上:342.5px;
  44. 高さ: 115px;
  45. 幅: 115ピクセル;
  46. 背景色: 透明;
  47. 境界線の半径: 50%;
  48. 境界線スタイル: 破線;
  49. 境界線の色: グレー;
  50. 位置: 絶対;
  51. 境界線の幅: 1px;
  52. マージン: 0px;
  53. パディング: 0px;
  54. }
  55.   
  56. /*金星*/
  57. .金星{
  58. 左:309px;
  59. 上:389px;
  60. 高さ: 22px;
  61. 幅: 22px;
  62. 背景色: rgb(246,157,97);
  63. 境界線の半径: 50%;
  64. 位置: 絶対;
  65. 変換の原点: 91px 11px;
  66. アニメーション: 3.84 秒の無限線形回転。
  67. }
  68.   
  69. /* 金星の軌道 */
  70. .venusOrbit {
  71. 左:320px;
  72. 上:320ピクセル;
  73. 高さ: 160px;
  74. 幅: 160ピクセル;
  75. 背景色: 透明;
  76. 境界線の半径: 50%;
  77. 境界線スタイル: 破線;
  78. 境界線の色: グレー;
  79. 位置: 絶対;
  80. 境界線の幅: 1px;
  81. /*マージン: 100px;*/
  82. /*変換原点: -75px -75px;*/
  83. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  84. マージン: 0px;
  85. パディング: 0px;
  86. }
  87.   
  88. /*地球*/
  89. 。地球 {
  90. 左:266.5px;
  91. 上:391ピクセル;
  92. 高さ: 18px;
  93. 幅: 18px;
  94. 背景色: rgb(115,114,174);
  95. 境界線の半径: 50%;
  96. 位置: 絶対;
  97. 変換の原点: 134px 9px;
  98. アニメーション: 6.25 秒の無限線形回転。
  99. }
  100.   
  101. /*地球の軌道*/
  102. .earthOrbit {
  103. 左:275px;
  104. 上:275px;
  105. 高さ: 250px;
  106. 幅: 250ピクセル;
  107. 背景色: 透明;
  108. 境界線の半径: 50%;
  109. 境界線スタイル: 破線;
  110. 境界線の色: グレー;
  111. 位置: 絶対;
  112. 境界線の幅: 1px;
  113. /*マージン: 100px;*/
  114. /*変換原点: -75px -75px;*/
  115. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  116. マージン: 0px;
  117. パディング: 0px;
  118. }
  119.   
  120. /*火星*/
  121. .mars {
  122. 左:222.5px;
  123. 上:392.5px;
  124. 高さ: 15px;
  125. 幅: 15px;
  126. 背景色: rgb(140,119,63);
  127. 境界線の半径: 50%;
  128. 位置: 絶対;
  129. 変換の原点: 177.5px 7.5px;
  130. アニメーション: 11.75 秒の無限線形回転。
  131. }
  132.   
  133. /*火星の軌道*/
  134. .marsOrbit {
  135. 左:230px;
  136. 上:230px;
  137. 高さ: 340ピクセル;
  138. 幅: 340ピクセル;
  139. 背景色: 透明;
  140. 境界線の半径: 50%;
  141. 境界線スタイル: 破線;
  142. 境界線の色: グレー;
  143. 位置: 絶対;
  144. 境界線の幅: 1px;
  145. /*マージン: 100px;*/
  146. /*変換原点: -75px -75px;*/
  147. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  148. マージン: 0px;
  149. パディング: 0px;
  150. }
  151.   
  152. /*木星*/
  153. .木星{
  154. 左:134px;
  155. 上:379ピクセル;
  156. 高さ: 42px;
  157. 幅: 42px;
  158. 背景色: rgb(156,164,143);
  159. 境界線の半径: 50%;
  160. 位置: 絶対;
  161. 変換の原点: 266px 21px;
  162. アニメーション: 74.04 秒の無限線形回転。
  163. }
  164.   
  165. /*木星の軌道*/
  166. .jupiterOrbit {
  167. 左:155px;
  168. 上:155px;
  169. 高さ: 490ピクセル;
  170. 幅: 490ピクセル;
  171. 背景色: 透明;
  172. 境界線の半径: 50%;
  173. 境界線スタイル: 破線;
  174. 境界線の色: グレー;
  175. 位置: 絶対;
  176. 境界線の幅: 1px;
  177. /*マージン: 100px;*/
  178. /*変換原点: -75px -75px;*/
  179. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  180. マージン: 0px;
  181. パディング: 0px;
  182. }
  183.   
  184. /*土星*/
  185. .土星{
  186. 左:92px;
  187. 上:387ピクセル;
  188. 高さ: 26px;
  189. 幅: 26px;
  190. 背景色: rgb(215,171,68);
  191. 境界線の半径: 50%;
  192. 位置: 絶対;
  193. 変換の原点: 308px 13px;
  194. アニメーション: 183.92 秒の無限線形回転。
  195. }
  196.   
  197. /*土星の軌道*/
  198. .saturn軌道{
  199. 左:105px;
  200. 上:105px;
  201. 高さ: 590ピクセル;
  202. 幅: 590ピクセル;
  203. 背景色: 透明;
  204. 境界線の半径: 50%;
  205. 境界線スタイル: 破線;
  206. 境界線の色: グレー;
  207. 位置: 絶対;
  208. 境界線の幅: 1px;
  209. /*マージン: 100px;*/
  210. /*変換原点: -75px -75px;*/
  211. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  212. マージン: 0px;
  213. パディング: 0px;
  214. }
  215.   
  216. /*天王星*/
  217. .ウラヌス {
  218. 左:41.5px;
  219. 上:386.5px;
  220. 高さ: 27px;
  221. 幅: 27px;
  222. 背景色: rgb(164,192,206);
  223. 境界線の半径: 50%;
  224. 位置: 絶対;
  225. 変換の原点: 358.5px 13.5px;
  226. アニメーション: 524.46 秒の無限線形回転。
  227. }
  228.   
  229. /* 天王星の軌道 */
  230. .uranusOrbit {
  231. 左:55px;
  232. 上:55px;
  233. 高さ: 690ピクセル;
  234. 幅: 690ピクセル;
  235. 背景色: 透明;
  236. 境界線の半径: 50%;
  237. 境界線スタイル: 破線;
  238. 境界線の色: グレー;
  239. 位置: 絶対;
  240. 境界線の幅: 1px;
  241. /*マージン: 100px;*/
  242. /*変換原点: -75px -75px;*/
  243. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  244. マージン: 0px;
  245. パディング: 0px;
  246. }
  247.   
  248. /*ネプチューン*/
  249. .ネプチューン {
  250. 左:10px;
  251. 上:390ピクセル;
  252. 高さ: 20px;
  253. 幅: 20px;
  254. 背景色: rgb(133,136,180);
  255. 境界線の半径: 50%;
  256. 位置: 絶対;
  257. 変換の原点: 390px 10px;
  258. アニメーション: 1028.76 秒の無限線形回転。
  259. }
  260.   
  261. /* 海王星の軌道 */
  262. .neptuneOrbit {
  263. 左:20px;
  264. 上:20px;
  265. 高さ: 760ピクセル;
  266. 幅: 760ピクセル;
  267. 背景色: 透明;
  268. 境界線の半径: 50%;
  269. 境界線スタイル: 破線;
  270. 境界線の色: グレー;
  271. 位置: 絶対;
  272. 境界線の幅: 1px;
  273. /*マージン: 100px;*/
  274. /*変換原点: -75px -75px;*/
  275. /*アニメーション: 4 秒間無限に直線的に回転します。*/
  276. マージン: 0px;
  277. パディング: 0px;
  278. }
  279.   
  280. @keyframes 回転 {
  281. 100% {
  282. 変換: 回転(-360度);
  283. }
  284. }
  285.   
  286.      </スタイル>   
  287.   
  288. </ヘッド>   
  289. <本文>   
  290.      < div  クラス= "solarsys" >   
  291.          <!--太陽-->   
  292.          < div  クラス= '太陽' > </ div >   
  293.   
  294.          <!--水星の軌道-->   
  295.          < div  クラス= 'mercuryOrbit' > </ div >   
  296.   
  297.          <!--水星-->   
  298.          < div  クラス= '水銀' > </ div >   
  299.   
  300.          <!--金星の軌道-->   
  301.          < div  クラス= 'venusOrbit' > </ div >   
  302.   
  303.          <!--金星-->   
  304.          < div  クラス= '金星' > </ div >   
  305.   
  306.          <!--地球軌道-->   
  307.          < div  クラス= 'earthOrbit' > </ div >   
  308.   
  309.          <!--地球-->   
  310.          < div  クラス= '地球' > </ div >   
  311.   
  312.          <!--火星軌道-->   
  313.          < div  クラス= 'marsOrbit' > </ div >   
  314.   
  315.          <!--火星-->   
  316.          < div  クラス= '火星' > </ div >   
  317.   
  318.          <!--木星の軌道-->   
  319.          < div  クラス= 'jupiterOrbit' > </ div >   
  320.   
  321.          <!--木星-->   
  322.          < div  クラス= 'jupiter' > </ div >   
  323.   
  324.          <!--土星の軌道-->   
  325.          < div  クラス= 'saturnOrbit' > </ div >   
  326.   
  327.          <!--土星-->   
  328.          < div  クラス= 'saturn' > </ div >   
  329.   
  330.          <!--天王星の軌道-->   
  331.          < div  クラス= 'uranusOrbit' > </ div >   
  332.   
  333.          <!--天王星-->   
  334.          < div  クラス= 'ウラヌス' > </ div >   
  335.   
  336.          <!--海王星の軌道-->   
  337.          < div  クラス= 'neptuneOrbit' > </ div >   
  338.   
  339.          <!--ネプチューン-->   
  340.          < div  クラス= 'ネプチューン' > </ div >   
  341.      </div>   
  342. </本文>   
  343. </html>   

太陽系の惑星のアニメーション効果を実装するための上記の html+css3 コードは、エディターがあなたと共有するすべてのコンテンツです。参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

<<:  MySQL内部一時テーブルの具体的な使用法

>>:  動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例

推薦する

HTML テーブルタグチュートリアル (46): テーブルフッタータグ

<tfoot> タグは、テーブル フッターのスタイルを定義するために使用されます。基本構...

Mysql で期間の交差をクエリする方法

MySQLクエリ期間の交差使用シナリオデータベース テーブルには、starttime と endti...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...

MySQLインジェクションバイパスフィルタリング技術の概要

まず、GIF 操作を見てみましょう。ケース1: スペースがフィルタリングされるスペースの代わりに角括...

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

HTMLにリンクを挿入する方法

各 Web ページには、URL () で識別されるアドレスがあります。通常、Web サイト内でリンク...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...

MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

JSはストップウォッチタイマーを実装します

この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...