【CSS】模拟太阳系行星的公转
前言
上文M元纯CSS实现日地月的公转开垦了一个项目——模拟太阳系行星绕太阳的公转 today I completed this project's work.
太阳系仅限于八大行星：水星、金星、地球、火星、木星、土星、天王星及海王星。曾有冥王星存在，在第26届国际天文联合会召开的会议上，天文学家们通过投票决定将其从传统意义上的行星范畴移出，并归类为矮行星。
我要遵循传统的天象图腾来绘制太阳以及六颗行星。五行金木水火土，并增添太阳与地球共称七曜。
实际上我将日月视为七曜，并不绘制它们中的一个原因是由于月球并非行星而是绕地球运行的卫星。
虽然没有月亮，但中秋节嘛，仰望星空总是对的。
| 太阳 Sun | 水星 Mercury | 金星 Venus | 地球 Earth | 火星 Mars | 木星 Jupiter | 土星 Saturn | |
|---|---|---|---|---|---|---|---|
| 中国古称： | 金燧 | 辰星 | 太白 | 地球 | 荧惑 | 岁星 | 镇星 |
前往源码页面（访问 Solar System 在 codepen.io 上），点击此处链接：https://codepen.io/Mancuoj/pen/KKqoYYx
HTML
列出框架：
<h1 id="main-title">Mancuoj</h1>
<ul id="planet-list">
<li id="sun-link">
<h3>金燧</h3>
</li>
<li id="mercury-link">
<h3>辰星</h3>
</li>
<li id="venus-link">
<h3>太白</h3>
</li>
<li id="earth-link">
<h3>地球</h3>
</li>
<li id="mars-link">
<h3>荧惑</h3>
</li>
<li id="jupiter-link">
<h3>岁星</h3>
</li>
<li id="saturn-link">
<h3>镇星</h3>
</li>
</ul>
<div id="orbit-container">
<div id="sun"></div>
<div class="orbit" id="mercury-orbit">
<div id="mercury"></div>
</div>
<div class="orbit" id="venus-orbit">
<div id="venus"></div>
</div>
<div class="orbit" id="earth-orbit">
<div id="earth"></div>
</div>
<div class="orbit" id="mars-orbit">
<div id="mars"></div>
</div>
<div class="orbit" id="jupiter-orbit">
<div id="jupiter"></div>
</div>
<div class="orbit" id="saturn-orbit">
<div id="saturn"></div>
</div>
</div>
代码解释CSS
核心是CSS技术的应用。主要是围绕星球和轨道的位置进行设计，并通过中国色网站获取了几种富有传统文化特色的颜色方案。
有些内容我在上篇文章中都有所涉及，在那篇文章中采用的那种方法更具吸引力且便于编辑。然而这种操作方式较为繁琐，请有心人进行优化改进。
背景及文字
虽然使用了草书显得十分美观但其中有些字不认得如果您不太习惯也可以选择使用行楷
背景颜色为野葡萄紫，随便设置一下列表。
@import url("https://fonts.googleapis.com/css2?family=Carattere&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Zhi+Mang+Xing&display=swap");
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: Carattere, sans-serif;
list-style: none;
}
body,
html {
background-color: #495c69;
}
#planet-list {
display: flex;
justify-content: center;
}
#planet-list li h3 {
/* font-family: 'Zhi Mang Xing', sans-serif; */
font-family: "Liu Jian Mao Cao", sans-serif;
color: white;
text-decoration: none;
font-size: 45px;
font-weight: lighter;
}
代码解释星球
不妨仅准备两个示例以作参考
#sun {
position: absolute;
top: calc(320px - 40px);
left: calc(50% - 40px);
width: 80px;
height: 80px;
background: linear-gradient(#fcd670, #f2784b);
border-radius: 100%;
box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
transition: 0.3s;
}
#mercury {
position: absolute;
width: 3px;
height: 3px;
top: 74px;
left: -4px;
border-radius: 100%;
background: linear-gradient(#f8f4ed, #e9ddb6);
}
代码解释轨道
同样放两个吧，Solar System (codepen.io)
/* orbit */
.orbit {
position: absolute;
border-radius: 100%;
border: 3px solid rgba(137, 196, 244, 0.1);
transition: 0.2s;
}
#mercury-orbit {
top: 245px;
left: calc(50% - 75px);
width: 150px;
height: 150px;
animation: spin-right 1.2s linear infinite;
}
#venus-orbit {
width: 225px;
height: 225px;
top: 206px;
left: calc(50% - 112.5px);
animation: spin-right 3.08s linear infinite;
}
代码解释动画
可以看到上面的轨道中都有 animation 属性：
xxx {
animation: spin-right 0.00s linear infinite;
}
代码解释需要用到 @keyframes 来定义动画：
@keyframes spin-right {
100% {
transform: rotate(1turn);
}
}
代码解释JS
用到了 jquery，需要导入：
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
代码解释当鼠标悬停在星体名称时, 即可呈现预期效果. 这两个函数的作用是为了确保在脱离视界时能够恢复至初始状态.
const planets = ["mercury", "venus", "earth", "mars", "jupiter", "saturn"];
for (let planet of planets) {
$(`#${planet}-link`).hover(
function () {
$(`#${planet}-orbit`).css({
border: "solid 3px rgba(137, 196, 244, 0.4)"
});
},
function () {
$(`#${planet}-orbit`).css({
border: "solid 3px rgba(137, 196, 244, 0.1)"
});
}
);
}
$("#sun-link").hover(
function () {
$("#sun").css({
"box-shadow": "0 0 10px 10px rgba(242, 120, 75, 0.8)"
});
},
function () {
$("#sun").css({
"box-shadow": "0 0 8px 8px rgba(242, 120, 75, 0.2)"
});
}
);
代码解释总结
前端太难了，再也不想写前端了（不是），参考图如下：
已经看到了,感谢您的支持与鼓励。
欢迎随时关注并相互交流!如果有任何问题或建议,请在评论区留言.我会及时回复并处理您的反馈.
我是Mancuoj,更多有趣文章: Mancuoj 的个人主页