diff --git a/Art/Comder101/solar_system.css b/Art/Comder101/solar_system.css new file mode 100644 index 000000000..71762b8c6 --- /dev/null +++ b/Art/Comder101/solar_system.css @@ -0,0 +1,133 @@ +body { + margin: 0; + overflow: hidden; + background-color: #000; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} +stars { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.star { + position: absolute; + width: 2px; + height: 2px; + background-color: white; + opacity: 0.5; + animation: twinkle 1s infinite; + background: url('star.png') no-repeat center center/contain; + +} + +@keyframes twinkle { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} +.solar-system { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.sun, +.planet { + width: 60px; + height: 60px; + background-color: #f39c12; + border-radius: 50%; + position: absolute; +} + +.sun { + background-color: #f39c12; +} + +.mercury { + background-color: #bdc3c7; + top: -20px; + left: 0; + animation: planet-revolution 4s infinite linear; +} + +.venus { + background-color: #d35400; + top: -40px; + left: 70px; + animation: planet-revolution 7s infinite linear; +} + +.earth { + background-color: #3498db; + top: -60px; + left: 140px; + animation: planet-revolution 12s infinite linear; +} + +.mars { + background-color: #e74c3c; + top: -80px; + left: 210px; + animation: planet-revolution 20s infinite linear; +} + +.orbit { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + +} + +.mercury-orbit { + width: 40px; + height: 40px; + animation: orbit-rotation 4s infinite linear; +} + +.venus-orbit { + width: 100px; + height: 100px; + animation: orbit-rotation 7s infinite linear; +} + +.earth-orbit { + width: 160px; + height: 160px; + animation: orbit-rotation 12s infinite linear; +} + +.mars-orbit { + width: 220px; + height: 220px; + animation: orbit-rotation 20s infinite linear; +} + + + +@keyframes planet-revolution { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@keyframes orbit-rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/Art/Comder101/solar_system.gif b/Art/Comder101/solar_system.gif new file mode 100644 index 000000000..b6cbc7bc7 Binary files /dev/null and b/Art/Comder101/solar_system.gif differ diff --git a/Art/Comder101/solar_system.html b/Art/Comder101/solar_system.html new file mode 100644 index 000000000..d35577381 --- /dev/null +++ b/Art/Comder101/solar_system.html @@ -0,0 +1,45 @@ + + +
+ + + + + +