أبعاد القمر ونُطبِّق الحركة spin

[الفارس]

أبعاد القمر ونُطبِّق الحركة spin
عليه (والتي سنعرِّفها لاحقًا)، وهذا ما سيجعل القمر يدور حول الأرض.

.moon {
animation: spin 20s linear infinite;
background: none;
height: 50px;
pointer-events: none;
transform-origin: 25px;
width: 50px;
}
عند هذه المرحلة سيكون القمر متموضعًا في منتصف الشاشة وفوق الأرض، لذا لنستخدم الخاصية transform لتحريك القمر إلى خارج الحاوية الخاصة بعيدًا عن الأرض.

.moon img {
height: 50px;
transform: translateX(-160px) translateY(-160px);
width: 50px;
}
هذا يعني أنَّ عنصر moon سيدور فوق الأرض، لكن الصورة ستدور حول الأرض.
لنضف الآن حواف مدورة للعنصر لكي تظهر حواف الأرض والقمر بدقة وسنستعمل الخاصية box-shadow لإعطائهما توهجًا أزرقًا:

.earth img, .moon img {
border-radius: 50%;
box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
}
في النهاية، سنُعرِّف الحركة spin لتدوير القمر، وهذه الحركة بسيطة، إذ سندوِّر القمر حول المحور Z بزاوية 360 درجة.

@keyframes spin {
to {
transform: rotateZ(360deg);
}
}
هذا هو ناتج هذه المرحلة:



عرض المزيد من المعلومات
نريد أن نظهر معلومات مفيدة حول كوكب الأرض عند مرور الفأرة فوقه، ربما ستساعد هذه المعلومات الفضائيين في معرفة بعض الأمور الأساسية عن كوكبنا قبل أن يزورونا .
علينا قبل ضبط حالة hover أن نضيف هذه المعلومات، وسنبدأ بإضافة عنصر div ذي المعرِّف more-info الذي يحتوي على بعض النصوص:

<article class="earth-demo">
<div class="earth">
<div class="more-info">
<h1>Earth</h1>
<ul>
<li>Third planet from the Sun</li>
<li>Atmosphere: 21% oxygen</li>
<li>Liquid water on surface</li>
<li>Only planet that has life (that we know of)</li>
</ul>
</div>
<img src="https://cssanimation.rocks/images/random/earth.png">
</div>
<div class="moon-container">
<div class="moon">
<img src="https://cssanimation.rocks/images/random/moon.png">
</div>
</div>
</article>
أضفنا هذه المعلومات داخل حاوية earth لأننا نريد جعلها جزءًا من التأثير، أي عند مرور الفأرة فوق النص فسيبقى على الشاشة.
سنضيف بعض أنماط CSS إلى عنصر more-info:

.earth .more-info {
background-image: linear-gradient(to bottom, rgba(10,10,10,1), black);
border-radius: 1em;
color: #fff;
opacity: 0;
padding: 1em;
transform-origin: 0 0;
transform: scale(.8);
width: 400px;
}

.earth .more-info h1 {
margin: 0 0 1em;
text-align: right;
}