如题看着玩玩吧，复制到记事本，存成 htnl 就可以啦， ps 吐槽。。编辑预览一点也不好用，此次打脸自己。。。。。
<html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 地心旋转效果</title> <style> .box{ transform: scale(0.5); position: relative; padding: 1px; height: 300px; width: 300px; margin:100px auto; } .sunline{ position:relative; height: 400px; width: 400px; border: 2px solid black; border-radius: 50%; margin: 50px 0 0 50px; display: flex; animation: rotate 10s infinite linear; } .sun{ height: 100px; width: 100px; margin: auto; background-color: red; border-radius: 50%;} .earthline{ position: absolute; right: 0; top: 50%; height: 200px; width: 200px; margin: -100px -100px 0 0; border: 1px solid black; border-radius: 50%; display: flex; animation: rotate 2s infinite linear; } .earth{ margin: auto; height: 50px; width: 50px; background-color: green; border-radius: 50%; } .moon{ position: absolute; left: 0; top: 50%; height: 20px; width: 20px; margin: -10px 0 0 -10px; background-color: gray; border-radius: 50%; } @keyframes rotate{ 100%{transform:rotate(360deg);} } </style>
</head> <body>
1
Select Language