【CSS——效果实现】地球漫游（蓝桥杯真题-6181）【合集】

Rossy Yan

发布于 2025-02-19 10:01:03

5500

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

"地球漫游"：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
└── index.html

其中:

index.html 是主页面。
css/style.css 是需要补充代码的 css 文件。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

cd /home/project
file="earth" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file}.zip"

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：：

目标效果

找到 css/style.csss 文件中的 TODO 部分，完成以下目标：给 .earth-con 元素添加动画，设置如下:

动画名称: orbit
动画时间: 36.5 秒
速度函数:线性
播放方式:无限循环

完成后，效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

.earth-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    z-index: 2;
    /* TODO:待补充代码，添加动画 */
    animation: orbit 36.5s linear infinite;
}



/* 以下代码不需要修改 */
* {
    padding: 0;
    margin: 0;

}
html,
body {
    height: 100%;
    width: 100%;
}

.solar-system:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    top: -2px;
    left: 2px;
    background: white;
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* box-shadow: 154px 1064px 0 0px rgba(255, 255, 255, 0.335), 858px 1292px 0 0px rgba(255, 255, 255, 0.085), 1608px 494px 0 0px rgba(255, 255, 255, 0.65), 501px 842px 0 0px rgba(255, 255, 255, 0.223), 340px 965px 0 0px rgba(255, 255, 255, 0.657), 121px 427px 0 0px rgba(255, 255, 255, 0.177), 493px 290px 0 0px rgba(255, 255, 255, 0.865), 1257px 130px 0 0px rgba(255, 255, 255, 0.604), 1434px 1279px 0 0px rgba(255, 255, 255, 0.232), 1126px 59px 0 0px rgba(255, 255, 255, 0.041), 700px 981px 0 0px rgba(255, 255, 255, 0.167), 1335px 1644px 0 0px rgba(255, 255, 255, 0.54), 370px 1737px 0 0px rgba(255, 255, 255, 0.69), 1062px 603px 0 0px rgba(255, 255, 255, 0.634), 777px 508px 0 0px rgba(255, 255, 255, 0.292), 66px 1649px 0 0px rgba(255, 255, 255, 0.009), 816px 1246px 0 0px rgba(255, 255, 255, 0.448), 734px 752px 0 0px rgba(255, 255, 255, 0.167), 656px 860px 0 0px rgba(255, 255, 255, 0.625), 1211px 320px 0 0px rgba(255, 255, 255, 0.027), 1499px 1204px 0 0px rgba(255, 255, 255, 0.197), 850px 392px 0 0px rgba(255, 255, 255, 0.791), 498px 244px 0 0px rgba(255, 255, 255, 0.143), 1280px 873px 0 0px rgba(255, 255, 255, 0.652), 295px 839px 0 0px rgba(255, 255, 255, 0.201), 1090px 1289px 0 0px rgba(255, 255, 255, 0.235), 1494px 985px 0 0px rgba(255, 255, 255, 0.144), 1673px 1261px 0 0px rgba(255, 255, 255, 0.429), 1345px 459px 0 0px rgba(255, 255, 255, 0.298), 401px 1610px 0 0px rgba(255, 255, 255, 0.795), 876px 1020px 0 0px rgba(255, 255, 255, 0.025), 233px 79px 0 0px rgba(255, 255, 255, 0.582), 747px 1122px 0 0px rgba(255, 255, 255, 0.816), 337px 846px 0 0px rgba(255, 255, 255, 0.816), 228px 337px 0 0px rgba(255, 255, 255, 0.942), 1476px 759px 0 0px rgba(255, 255, 255, 0.846), 1201px 354px 0 0px rgba(255, 255, 255, 0.916), 85px 744px 0 0px rgba(255, 255, 255, 0.912), 1387px 13px 0 0px rgba(255, 255, 255, 0.571), 331px 52px 0 0px rgba(255, 255, 255, 0.85), 182px 915px 0 0px rgba(255, 255, 255, 0.096), 1004px 654px 0 0px rgba(255, 255, 255, 0.279), 184px 1194px 0 0px rgba(255, 255, 255, 0.972), 1158px 1653px 0 0px rgba(255, 255, 255, 0.386), 620px 1125px 0 0px rgba(255, 255, 255, 0.116), 1092px 681px 0 0px rgba(255, 255, 255, 0.27), 1696px 1114px 0 0px rgba(255, 255, 255, 0.677), 1426px 1627px 0 0px rgba(255, 255, 255, 0.35), 1040px 1154px 0 0px rgba(255, 255, 255, 0.873), 124px 434px 0 0px rgba(255, 255, 255, 0.092), 1271px 1172px 0 0px rgba(255, 255, 255, 0.677), 1693px 882px 0 0px rgba(255, 255, 255, 0.288), 1057px 66px 0 0px rgba(255, 255, 255, 0.091), 791px 1669px 0 0px rgba(255, 255, 255, 0.833), 200px 802px 0 0px rgba(255, 255, 255, 0.755), 1654px 169px 0 0px rgba(255, 255, 255, 0.197), 1412px 271px 0 0px rgba(255, 255, 255, 0.876), 1789px 1152px 0 0px rgba(255, 255, 255, 0.264), 985px 170px 0 0px rgba(255, 255, 255, 0.349), 1685px 1595px 0 0px rgba(255, 255, 255, 0.395), 766px 651px 0 0px rgba(255, 255, 255, 0.464), 1509px 1315px 0 0px rgba(255, 255, 255, 0.198), 233px 1561px 0 0px rgba(255, 255, 255, 0.749), 231px 945px 0 0px rgba(255, 255, 255, 0.391), 186px 251px 0 0px rgba(255, 255, 255, 0.237), 1306px 637px 0 0px rgba(255, 255, 255, 0.081), 525px 294px 0 0px rgba(255, 255, 255, 0.499), 1065px 304px 0 0px rgba(255, 255, 255, 0.736), 556px 1567px 0 0px rgba(255, 255, 255, 0.485), 1234px 569px 0 0px rgba(255, 255, 255, 0.685), 472px 411px 0 0px rgba(255, 255, 255, 0.724), 655px 814px 0 0px rgba(255, 255, 255, 0.257), 524px 1371px 0 0px rgba(255, 255, 255, 0.104), 818px 805px 0 0px rgba(255, 255, 255, 0.658), 988px 1714px 0 0px rgba(255, 255, 255, 0.928), 83px 1758px 0 0px rgba(255, 255, 255, 0.59), 159px 514px 0 0px rgba(255, 255, 255, 0.772), 1777px 931px 0 0px rgba(255, 255, 255, 0.752), 783px 1299px 0 0px rgba(255, 255, 255, 0.582), 406px 1506px 0 0px rgba(255, 255, 255, 0.022), 1058px 447px 0 0px rgba(255, 255, 255, 0.997), 1434px 2px 0 0px rgba(255, 255, 255, 0.108), 1348px 527px 0 0px rgba(255, 255, 255, 0.771), 660px 1068px 0 0px rgba(255, 255, 255, 0.342), 957px 214px 0 0px rgba(255, 255, 255, 0.962), 654px 1637px 0 0px rgba(255, 255, 255, 0.36), 1534px 938px 0 0px rgba(255, 255, 255, 0.015), 1566px 1350px 0 0px rgba(255, 255, 255, 0.993), 1126px 727px 0 0px rgba(255, 255, 255, 0.741), 127px 1397px 0 0px rgba(255, 255, 255, 0.454), 373px 1110px 0 0px rgba(255, 255, 255, 0.014), 892px 1712px 0 0px rgba(255, 255, 255, 0.511), 145px 1181px 0 0px rgba(255, 255, 255, 0.681), 1759px 394px 0 0px rgba(255, 255, 255, 0.525), 1650px 1052px 0 0px rgba(255, 255, 255, 0.778), 1377px 1012px 0 0px rgba(255, 255, 255, 0.07), 1591px 1177px 0 0px rgba(255, 255, 255, 0.673), 1740px 1258px 0 0px rgba(255, 255, 255, 0.252), 528px 212px 0 0px rgba(255, 255, 255, 0.711), 1016px 252px 0 0px rgba(255, 255, 255, 0.764), 1013px 1499px 0 0px rgba(255, 255, 255, 0.214), 1747px 1083px 0 0px rgba(255, 255, 255, 0.437), 1266px 369px 0 0px rgba(255, 255, 255, 0.5), 543px 1360px 0 0px rgba(255, 255, 255, 0.717), 1466px 932px 0 0px rgba(255, 255, 255, 0.322), 373px 216px 0 0px rgba(255, 255, 255, 0.971), 857px 976px 0 0px rgba(255, 255, 255, 0.41), 615px 737px 0 0px rgba(255, 255, 255, 0.955), 1116px 522px 0 0px rgba(255, 255, 255, 0.547), 1742px 1076px 0 0px rgba(255, 255, 255, 0.13), 1598px 450px 0 0px rgba(255, 255, 255, 0.853), 1791px 884px 0 0px rgba(255, 255, 255, 0.139), 477px 859px 0 0px rgba(255, 255, 255, 0.241), 1117px 896px 0 0px rgba(255, 255, 255, 0.06), 1688px 511px 0 0px rgba(255, 255, 255, 0.003), 1570px 1769px 0 0px rgba(255, 255, 255, 0.24), 1274px 166px 0 0px rgba(255, 255, 255, 0.617), 318px 1404px 0 0px rgba(255, 255, 255, 0.977), 1640px 1730px 0 0px rgba(255, 255, 255, 0.133), 1053px 646px 0 0px rgba(255, 255, 255, 0.886), 612px 1455px 0 0px rgba(255, 255, 255, 0.592), 481px 806px 0 0px rgba(255, 255, 255, 0.773), 528px 714px 0 0px rgba(255, 255, 255, 0.26), 1154px 1535px 0 0px rgba(255, 255, 255, 0.881), 40px 319px 0 0px rgba(255, 255, 255, 0.808), 1127px 374px 0 0px rgba(255, 255, 255, 0.868), 1791px 965px 0 0px rgba(255, 255, 255, 0.292), 1369px 806px 0 0px rgba(255, 255, 255, 0.783), 808px 1752px 0 0px rgba(255, 255, 255, 0.71), 722px 1056px 0 0px rgba(255, 255, 255, 0.95), 1440px 1110px 0 0px rgba(255, 255, 255, 0.554), 1796px 1778px 0 0px rgba(255, 255, 255, 0.404), 788px 71px 0 0px rgba(255, 255, 255, 0.968), 133px 1178px 0 0px rgba(255, 255, 255, 0.159), 282px 1106px 0 0px rgba(255, 255, 255, 0.95), 42px 426px 0 0px rgba(255, 255, 255, 0.451), 1638px 461px 0 0px rgba(255, 255, 255, 0.245), 1188px 779px 0 0px rgba(255, 255, 255, 0.433), 587px 1457px 0 0px rgba(255, 255, 255, 0.246), 1715px 1217px 0 0px rgba(255, 255, 255, 0.866), 1056px 1035px 0 0px rgba(255, 255, 255, 0.71), 827px 1086px 0 0px rgba(255, 255, 255, 0.357), 901px 212px 0 0px rgba(255, 255, 255, 0.413), 1172px 218px 0 0px rgba(255, 255, 255, 0.026), 1057px 1420px 0 0px rgba(255, 255, 255, 0.723), 1423px 1697px 0 0px rgba(255, 255, 255, 0.559), 649px 484px 0 0px rgba(255, 255, 255, 0.565), 65px 988px 0 0px rgba(255, 255, 255, 0.425), 356px 1280px 0 0px rgba(255, 255, 255, 0.899), 472px 505px 0 0px rgba(255, 255, 255, 0.424), 815px 705px 0 0px rgba(255, 255, 255, 0.804), 1317px 1203px 0 0px rgba(255, 255, 255, 0.039), 883px 1118px 0 0px rgba(255, 255, 255, 0.372), 788px 574px 0 0px rgba(255, 255, 255, 0.043), 1780px 1495px 0 0px rgba(255, 255, 255, 0.841), 125px 528px 0 0px rgba(255, 255, 255, 0.109), 1402px 1519px 0 0px rgba(255, 255, 255, 0.62), 286px 636px 0 0px rgba(255, 255, 255, 0.522), 140px 1464px 0 0px rgba(255, 255, 255, 0.787), 1703px 427px 0 0px rgba(255, 255, 255, 0.767), 427px 1180px 0 0px rgba(255, 255, 255, 0.92), 1310px 963px 0 0px rgba(255, 255, 255, 0.338), 1453px 1675px 0 0px rgba(255, 255, 255, 0.269), 1590px 1184px 0 0px rgba(255, 255, 255, 0.799), 722px 1249px 0 0px rgba(255, 255, 255, 0.16), 1157px 1800px 0 0px rgba(255, 255, 255, 0.311), 1307px 1102px 0 0px rgba(255, 255, 255, 0.388), 1367px 769px 0 0px rgba(255, 255, 255, 0.234), 445px 963px 0 0px rgba(255, 255, 255, 0.82), 733px 624px 0 0px rgba(255, 255, 255, 0.919), 192px 1148px 0 0px rgba(255, 255, 255, 0.049), 726px 814px 0 0px rgba(255, 255, 255, 0.349), 563px 34px 0 0px rgba(255, 255, 255, 0.592), 270px 980px 0 0px rgba(255, 255, 255, 0.712), 1719px 1615px 0 0px rgba(255, 255, 255, 0.295), 1127px 640px 0 0px rgba(255, 255, 255, 0.301), 1492px 725px 0 0px rgba(255, 255, 255, 0.171), 654px 192px 0 0px rgba(255, 255, 255, 0.169), 1430px 693px 0 0px rgba(255, 255, 255, 0.406), 438px 911px 0 0px rgba(255, 255, 255, 0.645), 498px 1250px 0 0px rgba(255, 255, 255, 0.477), 769px 66px 0 0px rgba(255, 255, 255, 0.609), 1433px 833px 0 0px rgba(255, 255, 255, 0.289), 179px 801px 0 0px rgba(255, 255, 255, 0.258), 127px 377px 0 0px rgba(255, 255, 255, 0.62), 129px 1112px 0 0px rgba(255, 255, 255, 0.749), 1547px 1794px 0 0px rgba(255, 255, 255, 0.556), 587px 880px 0 0px rgba(255, 255, 255, 0.464), 237px 1257px 0 0px rgba(255, 255, 255, 0.8), 403px 497px 0 0px rgba(255, 255, 255, 0.949), 727px 928px 0 0px rgba(255, 255, 255, 0.429), 750px 1041px 0 0px rgba(255, 255, 255, 0.288), 1487px 846px 0 0px rgba(255, 255, 255, 0.528), 1038px 1025px 0 0px rgba(255, 255, 255, 0.743), 1275px 1502px 0 0px rgba(255, 255, 255, 0.725), 1347px 1486px 0 0px rgba(255, 255, 255, 0.219), 572px 560px 0 0px rgba(255, 255, 255, 0.962), 1158px 1240px 0 0px rgba(255, 255, 255, 0.633), 1447px 1755px 0 0px rgba(255, 255, 255, 0.808), 1026px 491px 0 0px rgba(255, 255, 255, 0.904), 223px 1193px 0 0px rgba(255, 255, 255, 0.928), 1599px 564px 0 0px rgba(255, 255, 255, 0.03), 643px 217px 0 0px rgba(255, 255, 255, 0.373), 1333px 177px 0 0px rgba(255, 255, 255, 0.903), 1329px 350px 0 0px rgba(255, 255, 255, 0.65), 1672px 118px 0 0px rgba(255, 255, 255, 0.427), 719px 921px 0 0px rgba(255, 255, 255, 0.977), 1320px 951px 0 0px rgba(255, 255, 255, 0.28), 422px 559px 0 0px rgba(255, 255, 255, 0.803), 971px 1416px 0 0px rgba(255, 255, 255, 0.349), 390px 1185px 0 0px rgba(255, 255, 255, 0.432), 1676px 53px 0 0px rgba(255, 255, 255, 0.45), 740px 60px 0 0px rgba(255, 255, 255, 0.52), 1113px 946px 0 0px rgba(255, 255, 255, 0.188), 797px 1800px 0 0px rgba(255, 255, 255, 0.009), 1230px 526px 0 0px rgba(255, 255, 255, 0.48), 1682px 1506px 0 0px rgba(255, 255, 255, 0.6), 1596px 1417px 0 0px rgba(255, 255, 255, 0.236), 825px 1333px 0 0px rgba(255, 255, 255, 0.495), 486px 764px 0 0px rgba(255, 255, 255, 0.562), 509px 54px 0 0px rgba(255, 255, 255, 0.831), 1561px 1513px 0 0px rgba(255, 255, 255, 0.712), 1610px 155px 0 0px rgba(255, 255, 255, 0.737), 290px 864px 0 0px rgba(255, 255, 255, 0.465), 1792px 959px 0 0px rgba(255, 255, 255, 0.035), 1574px 1365px 0 0px rgba(255, 255, 255, 0.794), 437px 976px 0 0px rgba(255, 255, 255, 0.943), 333px 829px 0 0px rgba(255, 255, 255, 0.952), 1348px 294px 0 0px rgba(255, 255, 255, 0.852), 224px 456px 0 0px rgba(255, 255, 255, 0.971), 311px 348px 0 0px rgba(255, 255, 255, 0.094), 96px 865px 0 0px rgba(255, 255, 255, 0.447), 1755px 1640px 0 0px rgba(255, 255, 255, 0.585), 292px 1564px 0 0px rgba(255, 255, 255, 0.631), 367px 784px 0 0px rgba(255, 255, 255, 0.705), 536px 874px 0 0px rgba(255, 255, 255, 0.77), 775px 847px 0 0px rgba(255, 255, 255, 0.203), 809px 392px 0 0px rgba(255, 255, 255, 0.673), 1599px 209px 0 0px rgba(255, 255, 255, 0.935), 1621px 342px 0 0px rgba(255, 255, 255, 0.098), 520px 526px 0 0px rgba(255, 255, 255, 0.461), 1331px 1470px 0 0px rgba(255, 255, 255, 0.449), 1640px 958px 0 0px rgba(255, 255, 255, 0.114), 1239px 1164px 0 0px rgba(255, 255, 255, 0.771), 43px 1331px 0 0px rgba(255, 255, 255, 0.942), 1769px 1022px 0 0px rgba(255, 255, 255, 0.382), 60px 1359px 0 0px rgba(255, 255, 255, 0.766), 1406px 630px 0 0px rgba(255, 255, 255, 0.951), 1202px 1593px 0 0px rgba(255, 255, 255, 0.659), 267px 553px 0 0px rgba(255, 255, 255, 0.809), 650px 879px 0 0px rgba(255, 255, 255, 0.986), 1633px 1129px 0 0px rgba(255, 255, 255, 0.229), 447px 1602px 0 0px rgba(255, 255, 255, 0.001), 1264px 1625px 0 0px rgba(255, 255, 255, 0.014), 931px 724px 0 0px rgba(255, 255, 255, 0.961), 737px 1012px 0 0px rgba(255, 255, 255, 0.365), 1055px 1673px 0 0px rgba(255, 255, 255, 0.37), 1063px 1080px 0 0px rgba(255, 255, 255, 0.814), 178px 819px 0 0px rgba(255, 255, 255, 0.312), 50px 1732px 0 0px rgba(255, 255, 255, 0.944), 1112px 557px 0 0px rgba(255, 255, 255, 0.201), 1146px 1609px 0 0px rgba(255, 255, 255, 0.886), 1209px 479px 0 0px rgba(255, 255, 255, 0.741), 858px 284px 0 0px rgba(255, 255, 255, 0.053), 1044px 1665px 0 0px rgba(255, 255, 255, 0.368), 1297px 797px 0 0px rgba(255, 255, 255, 0.907), 620px 111px 0 0px rgba(255, 255, 255, 0.94), 88px 528px 0 0px rgba(255, 255, 255, 0.576), 530px 830px 0 0px rgba(255, 255, 255, 0.142), 1318px 1700px 0 0px rgba(255, 255, 255, 0.822), 601px 597px 0 0px rgba(255, 255, 255, 0.825), 1259px 314px 0 0px rgba(255, 255, 255, 0.306), 1370px 1447px 0 0px rgba(255, 255, 255, 0.108), 984px 713px 0 0px rgba(255, 255, 255, 0.639), 490px 73px 0 0px rgba(255, 255, 255, 0.568), 809px 279px 0 0px rgba(255, 255, 255, 0.628), 1506px 1624px 0 0px rgba(255, 255, 255, 0.63), 1321px 1753px 0 0px rgba(255, 255, 255, 0.561), 840px 789px 0 0px rgba(255, 255, 255, 0.516), 184px 1198px 0 0px rgba(255, 255, 255, 0.791), 1754px 287px 0 0px rgba(255, 255, 255, 0.528), 481px 985px 0 0px rgba(255, 255, 255, 0.925), 390px 1591px 0 0px rgba(255, 255, 255, 0.57), 1643px 100px 0 0px rgba(255, 255, 255, 0.075), 625px 407px 0 0px rgba(255, 255, 255, 0.924), 4px 1591px 0 0px rgba(255, 255, 255, 0.508), 335px 31px 0 0px rgba(255, 255, 255, 0.153), 413px 975px 0 0px rgba(255, 255, 255, 0.829), 103px 678px 0 0px rgba(255, 255, 255, 0.516), 537px 16px 0 0px rgba(255, 255, 255, 0.231), 989px 1345px 0 0px rgba(255, 255, 255, 0.033), 511px 727px 0 0px rgba(255, 255, 255, 0.402), 1453px 1293px 0 0px rgba(255, 255, 255, 0.653), 1466px 297px 0 0px rgba(255, 255, 255, 0.187), 1371px 1034px 0 0px rgba(255, 255, 255, 0.263), 1424px 1200px 0 0px rgba(255, 255, 255, 0.824), 1003px 915px 0 0px rgba(255, 255, 255, 0.922), 169px 1517px 0 0px rgba(255, 255, 255, 0.177), 390px 1727px 0 0px rgba(255, 255, 255, 0.207), 1503px 117px 0 0px rgba(255, 255, 255, 0.712), 1788px 1536px 0 0px rgba(255, 255, 255, 0.629), 96px 151px 0 0px rgba(255, 255, 255, 0.724), 690px 1483px 0 0px rgba(255, 255, 255, 0.83), 350px 596px 0 0px rgba(255, 255, 255, 0.911), 1281px 1357px 0 0px rgba(255, 255, 255, 0.456), 480px 696px 0 0px rgba(255, 255, 255, 0.861), 214px 442px 0 0px rgba(255, 255, 255, 0.004), 131px 1637px 0 0px rgba(255, 255, 255, 0.869), 330px 792px 0 0px rgba(255, 255, 255, 0.524), 458px 572px 0 0px rgba(255, 255, 255, 0.57), 1180px 1252px 0 0px rgba(255, 255, 255, 0.195), 1057px 1092px 0 0px rgba(255, 255, 255, 0.951), 1151px 54px 0 0px rgba(255, 255, 255, 0.24), 552px 1440px 0 0px rgba(255, 255, 255, 0.146), 539px 876px 0 0px rgba(255, 255, 255, 0.392), 174px 436px 0 0px rgba(255, 255, 255, 0.186), 811px 623px 0 0px rgba(255, 255, 255, 0.374), 743px 742px 0 0px rgba(255, 255, 255, 0.464), 111px 696px 0 0px rgba(255, 255, 255, 0.708), 1470px 709px 0 0px rgba(255, 255, 255, 0.575), 1483px 1694px 0 0px rgba(255, 255, 255, 0.522), 1062px 1172px 0 0px rgba(255, 255, 255, 0.93), 899px 1448px 0 0px rgba(255, 255, 255, 0.173), 148px 1059px 0 0px rgba(255, 255, 255, 0.713), 546px 284px 0 0px rgba(255, 255, 255, 0.497), 670px 1010px 0 0px rgba(255, 255, 255, 0.043), 1671px 335px 0 0px rgba(255, 255, 255, 0.389), 258px 890px 0 0px rgba(255, 255, 255, 0.728), 576px 967px 0 0px rgba(255, 255, 255, 0.34), 276px 71px 0 0px rgba(255, 255, 255, 0.957), 685px 65px 0 0px rgba(255, 255, 255, 0.451), 1548px 1769px 0 0px rgba(255, 255, 255, 0.764), 1668px 377px 0 0px rgba(255, 255, 255, 0.632), 1713px 1697px 0 0px rgba(255, 255, 255, 0.993), 1227px 355px 0 0px rgba(255, 255, 255, 0.985), 1087px 335px 0 0px rgba(255, 255, 255, 0.361), 1255px 546px 0 0px rgba(255, 255, 255, 0.957), 916px 113px 0 0px rgba(255, 255, 255, 0.057), 103px 656px 0 0px rgba(255, 255, 255, 0.887), 1742px 901px 0 0px rgba(255, 255, 255, 0.703), 632px 1733px 0 0px rgba(255, 255, 255, 0.14), 1378px 522px 0 0px rgba(255, 255, 255, 0.378), 863px 1782px 0 0px rgba(255, 255, 255, 0.648), 1168px 376px 0 0px rgba(255, 255, 255, 0.826), 1770px 190px 0 0px rgba(255, 255, 255, 0.052), 56px 1317px 0 0px rgba(255, 255, 255, 0.413), 1729px 873px 0 0px rgba(255, 255, 255, 0.973), 1738px 215px 0 0px rgba(255, 255, 255, 0.163), 429px 222px 0 0px rgba(255, 255, 255, 0.671), 403px 154px 0 0px rgba(255, 255, 255, 0.067), 1px 1356px 0 0px rgba(255, 255, 255, 0.789), 638px 576px 0 0px rgba(255, 255, 255, 0.819), 1248px 1146px 0 0px rgba(255, 255, 255, 0.683), 397px 1263px 0 0px rgba(255, 255, 255, 0.885), 397px 1189px 0 0px rgba(255, 255, 255, 0.561), 1009px 1630px 0 0px rgba(255, 255, 255, 0.585), 1051px 1026px 0 0px rgba(255, 255, 255, 0.649), 665px 1301px 0 0px rgba(255, 255, 255, 0.883), 861px 563px 0 0px rgba(255, 255, 255, 0.99), 113px 297px 0 0px rgba(255, 255, 255, 0.391), 286px 1755px 0 0px rgba(255, 255, 255, 0.05), 1343px 62px 0 0px rgba(255, 255, 255, 0.363), 1592px 380px 0 0px rgba(255, 255, 255, 0.507), 784px 1114px 0 0px rgba(255, 255, 255, 0.281), 1791px 1239px 0 0px rgba(255, 255, 255, 0.779), 739px 853px 0 0px rgba(255, 255, 255, 0.806), 416px 129px 0 0px rgba(255, 255, 255, 0.062), 747px 517px 0 0px rgba(255, 255, 255, 0.474), 778px 31px 0 0px rgba(255, 255, 255, 0.179), 296px 327px 0 0px rgba(255, 255, 255, 0.278), 742px 1556px 0 0px rgba(255, 255, 255, 0.052), 1151px 559px 0 0px rgba(255, 255, 255, 0.152), 1501px 104px 0 0px rgba(255, 255, 255, 0.055), 1680px 355px 0 0px rgba(255, 255, 255, 0.886), 1785px 1067px 0 0px rgba(255, 255, 255, 0.865), 1027px 153px 0 0px rgba(255, 255, 255, 0.781), 958px 40px 0 0px rgba(255, 255, 255, 0.455), 830px 335px 0 0px rgba(255, 255, 255, 0.225), 308px 1527px 0 0px rgba(255, 255, 255, 0.126), 706px 268px 0 0px rgba(255, 255, 255, 0.823), 599px 549px 0 0px rgba(255, 255, 255, 0.233), 1038px 1466px 0 0px rgba(255, 255, 255, 0.946), 1600px 377px 0 0px rgba(255, 255, 255, 0.403), 493px 1273px 0 0px rgba(255, 255, 255, 0.806), 454px 1729px 0 0px rgba(255, 255, 255, 0.599), 668px 625px 0 0px rgba(255, 255, 255, 0.772), 1747px 861px 0 0px rgba(255, 255, 255, 0.327), 66px 105px 0 0px rgba(255, 255, 255, 0.051), 1129px 1184px 0 0px rgba(255, 255, 255, 0.254), 1118px 945px 0 0px rgba(255, 255, 255, 0.926), 1537px 471px 0 0px rgba(255, 255, 255, 0.488), 671px 1705px 0 0px rgba(255, 255, 255, 0.407), 169px 1736px 0 0px rgba(255, 255, 255, 0.259), 364px 1255px 0 0px rgba(255, 255, 255, 0.259), 1729px 1186px 0 0px rgba(255, 255, 255, 0.723), 596px 347px 0 0px rgba(255, 255, 255, 0.593), 1480px 1673px 0 0px rgba(255, 255, 255, 0.133), 1011px 830px 0 0px rgba(255, 255, 255, 0.561), 1478px 267px 0 0px rgba(255, 255, 255, 0.921), 1238px 518px 0 0px rgba(255, 255, 255, 0.544), 1474px 971px 0 0px rgba(255, 255, 255, 0.224), 181px 1530px 0 0px rgba(255, 255, 255, 0.73), 1325px 183px 0 0px rgba(255, 255, 255, 0.849), 1541px 788px 0 0px rgba(255, 255, 255, 0.92), 531px 616px 0 0px rgba(255, 255, 255, 0.117), 1553px 1045px 0 0px rgba(255, 255, 255, 0.118), 1504px 1751px 0 0px rgba(255, 255, 255, 0.398), 122px 443px 0 0px rgba(255, 255, 255, 0.76), 1246px 1083px 0 0px rgba(255, 255, 255, 0.918), 1091px 303px 0 0px rgba(255, 255, 255, 0.051), 504px 1074px 0 0px rgba(255, 255, 255, 0.392), 908px 1016px 0 0px rgba(255, 255, 255, 0.132), 228px 438px 0 0px rgba(255, 255, 255, 0.344), 193px 1473px 0 0px rgba(255, 255, 255, 0.257), 906px 214px 0 0px rgba(255, 255, 255, 0.911), 43px 440px 0 0px rgba(255, 255, 255, 0.705), 1448px 1605px 0 0px rgba(255, 255, 255, 0.119), 1441px 937px 0 0px rgba(255, 255, 255, 0.06), 785px 332px 0 0px rgba(255, 255, 255, 0.186), 1178px 911px 0 0px rgba(255, 255, 255, 0.057), 719px 158px 0 0px rgba(255, 255, 255, 0.923), 1235px 612px 0 0px rgba(255, 255, 255, 0.067), 1283px 1668px 0 0px rgba(255, 255, 255, 0.23), 396px 1286px 0 0px rgba(255, 255, 255, 0.296), 3px 485px 0 0px rgba(255, 255, 255, 0.022), 189px 1678px 0 0px rgba(255, 255, 255, 0.555), 1781px 117px 0 0px rgba(255, 255, 255, 0.614), 1016px 862px 0 0px rgba(255, 255, 255, 0.665), 964px 1496px 0 0px rgba(255, 255, 255, 0.883), 1740px 527px 0 0px rgba(255, 255, 255, 0.756), 1173px 1721px 0 0px rgba(255, 255, 255, 0.28), 629px 595px 0 0px rgba(255, 255, 255, 0.086), 1491px 1411px 0 0px rgba(255, 255, 255, 0.517), 1011px 740px 0 0px rgba(255, 255, 255, 0.311), 1378px 1211px 0 0px rgba(255, 255, 255, 0.865), 1058px 1247px 0 0px rgba(255, 255, 255, 0.528), 1280px 875px 0 0px rgba(255, 255, 255, 0.078), 864px 1041px 0 0px rgba(255, 255, 255, 0.342), 1159px 798px 0 0px rgba(255, 255, 255, 0.743), 569px 570px 0 0px rgba(255, 255, 255, 0.99), 1203px 136px 0 0px rgba(255, 255, 255, 0.286), 989px 309px 0 0px rgba(255, 255, 255, 0.556), 1046px 1237px 0 0px rgba(255, 255, 255, 0.642), 1463px 1420px 0 0px rgba(255, 255, 255, 0.706), 854px 987px 0 0px rgba(255, 255, 255, 0.418), 1391px 1782px 0 0px rgba(255, 255, 255, 0.622), 761px 49px 0 0px rgba(255, 255, 255, 0.556), 1631px 1222px 0 0px rgba(255, 255, 255, 0.645), 1249px 693px 0 0px rgba(255, 255, 255, 0.02), 707px 1043px 0 0px rgba(255, 255, 255, 0.855), 653px 1128px 0 0px rgba(255, 255, 255, 0.167), 1357px 991px 0 0px rgba(255, 255, 255, 0.089), 222px 238px 0 0px rgba(255, 255, 255, 0.925), 1393px 1670px 0 0px rgba(255, 255, 255, 0.868), 80px 898px 0 0px rgba(255, 255, 255, 0.492), 483px 527px 0 0px rgba(255, 255, 255, 0.349), 817px 1398px 0 0px rgba(255, 255, 255, 0.282), 340px 956px 0 0px rgba(255, 255, 255, 0.62), 1211px 1756px 0 0px rgba(255, 255, 255, 0.375), 1347px 298px 0 0px rgba(255, 255, 255, 0.481), 372px 1115px 0 0px rgba(255, 255, 255, 0.123), 1150px 1041px 0 0px rgba(255, 255, 255, 0.801), 1615px 419px 0 0px rgba(255, 255, 255, 0.685), 647px 571px 0 0px rgba(255, 255, 255, 0.382), 510px 1288px 0 0px rgba(255, 255, 255, 0.238), 1454px 1127px 0 0px rgba(255, 255, 255, 0.974), 313px 1605px 0 0px rgba(255, 255, 255, 0.266), 1799px 470px 0 0px rgba(255, 255, 255, 0.817), 953px 942px 0 0px rgba(255, 255, 255, 0.382), 1699px 1137px 0 0px rgba(255, 255, 255, 0.289), 1352px 1310px 0 0px rgba(255, 255, 255, 0.107), 1083px 1250px 0 0px rgba(255, 255, 255, 0.537), 308px 453px 0 0px rgba(255, 255, 255, 0.186), 1395px 1584px 0 0px rgba(255, 255, 255, 0.005), 298px 1245px 0 0px rgba(255, 255, 255, 0.112), 888px 1727px 0 0px rgba(255, 255, 255, 0.786), 1199px 538px 0 0px rgba(255, 255, 255, 0.511), 699px 562px 0 0px rgba(255, 255, 255, 0.044), 1410px 1035px 0 0px rgba(255, 255, 255, 0.854), 1469px 102px 0 0px rgba(255, 255, 255, 0.325), 590px 186px 0 0px rgba(255, 255, 255, 0.74), 611px 101px 0 0px rgba(255, 255, 255, 0.711), 630px 159px 0 0px rgba(255, 255, 255, 0.051), 1567px 1653px 0 0px rgba(255, 255, 255, 0.51), 1460px 684px 0 0px rgba(255, 255, 255, 0.783), 713px 1115px 0 0px rgba(255, 255, 255, 0.281), 161px 187px 0 0px rgba(255, 255, 255, 0.309), 77px 1496px 0 0px rgba(255, 255, 255, 0.205), 303px 1649px 0 0px rgba(255, 255, 255, 0.39), 1044px 504px 0 0px rgba(255, 255, 255, 0.682), 1604px 654px 0 0px rgba(255, 255, 255, 0.864), 175px 495px 0 0px rgba(255, 255, 255, 0.379), 2px 1570px 0 0px rgba(255, 255, 255, 0.64), 911px 793px 0 0px rgba(255, 255, 255, 0.685), 626px 1222px 0 0px rgba(255, 255, 255, 0.318), 172px 599px 0 0px rgba(255, 255, 255, 0.483), 1693px 736px 0 0px rgba(255, 255, 255, 0.988), 504px 724px 0 0px rgba(255, 255, 255, 0.807), 348px 1282px 0 0px rgba(255, 255, 255, 0.621), 171px 382px 0 0px rgba(255, 255, 255, 0.563);
*/
    border-radius: 100px;
}


.solar-system {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}

.sun {
    background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
    height: 150px;
    width: 150px;
    border-radius: 50%;
    position: relative;

}



.earth-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border: 2px dashed #fff;
    border-radius: 50%;

}

.earth {
    background: #007bff;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
}


@keyframes orbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地球漫游</title>
     <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="solar-system">
        <div class="sun"></div>
        <div class="earth-con">
            <div class="earth"></div>
        </div>
        <div class="earth-orbit"></div>
        <div class='asteroids-belt'></div>
    </div>
</body>

</html>

<!DOCTYPE html>：声明文档类型为 HTML5，告诉浏览器按照 HTML5 的标准来解析页面。
<html> 标签：HTML 文档的根标签，所有 HTML 元素都必须位于 <html> 标签内。
<head> 部分：
- <meta charset="UTF-8">：设置文档的字符编码为 UTF - 8，确保页面能正确显示各种语言字符。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置页面在移动设备上的布局，使页面宽度自适应设备屏幕宽度，初始缩放比例为 1.0。
- <title>地球漫游</title>：设置页面的标题，显示在浏览器的标签页上。
- <link rel="stylesheet" href="./css/style.css">：引入外部 CSS 文件 style.css，用于设置页面的样式。
<body> 部分：
- <div class="solar-system">：作为整个太阳系场景的容器，包含了太阳、地球、地球轨道和小行星带等元素。
- <div class="sun"></div>：表示太阳，后续会通过 CSS 样式来设置其外观。
- <div class="earth-con">：地球的容器，包裹着地球元素，方便对地球进行定位和动画设置。
  - <div class="earth"></div>：表示地球，后续会通过 CSS 样式来设置其外观。
- <div class="earth-orbit"></div>：表示地球的公转轨道，后续会通过 CSS 样式来设置其外观。
- <div class='asteroids-belt'></div>：表示小行星带，后续会通过 CSS 样式来设置其外观。

二、CSS 部分

/* 全局样式，清除内外边距 */
* {
    padding: 0;
    margin: 0;
}

/* 设置 html 和 body 的高度和宽度为 100% */
html,
body {
    height: 100%;
    width: 100%;
}

/* 太阳系容器样式 */
.solar-system {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}

/* 太阳样式 */
.sun {
    background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
    height: 150px;
    width: 150px;
    border-radius: 50%;
    position: relative;
}

/* 地球容器样式 */
.earth-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    z-index: 2;
    animation: orbit 36.5s linear infinite;
}

/* 地球轨道样式 */
.earth-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border: 2px dashed #fff;
    border-radius: 50%;
}

/* 地球样式 */
.earth {
    background: #007bff;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
}

/* 小行星带样式 */
.solar-system:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    top: -2px;
    left: 2px;
    background: white;
    box-shadow: 154px 1064px 0 0px rgba(255, 255, 255, 0.335), 858px 1292px 0 0px rgba(255, 255, 255, 0.085), /* 大量的 box - shadow 设置 */
    border-radius: 100px;
}

/* 地球公转动画 */
@keyframes orbit {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

全局样式：
- * { padding: 0; margin: 0; }：清除所有元素的内外边距，避免不同浏览器的默认样式影响页面布局。
- html, body { height: 100%; width: 100%; }：设置 html 和 body 元素的高度和宽度为 100%，确保页面能占满整个浏览器窗口。
太阳系容器样式（.solar-system）：
- display: flex：使用 Flexbox 布局，使子元素可以方便地进行水平和垂直居中。
- justify-content: center 和 align-items: center：将子元素在水平和垂直方向上都居中对齐。
- height: 100vh：设置容器的高度为视口高度，确保容器占满整个屏幕。
- background: #000：设置容器的背景颜色为黑色，模拟宇宙的黑暗背景。
太阳样式（.sun）：
- background: radial-gradient(ellipse at center, ...)：使用径向渐变来模拟太阳的发光效果，从中心向外颜色逐渐变化。
- height: 150px 和 width: 150px：设置太阳的高度和宽度为 150px。
- border-radius: 50%：将太阳的形状设置为圆形。
- position: relative：设置太阳的定位方式为相对定位，方便后续子元素进行绝对定位。
地球容器样式（.earth-con）：
- position: absolute：设置地球容器的定位方式为绝对定位，相对于 .solar-system 容器进行定位。
- top: 50%; left: 50%; transform: translate(-50%, -50%);：将地球容器的中心定位到 .solar-system 容器的中心。
- width: 500px 和 height: 500px：设置地球容器的高度和宽度为 500px，用于确定地球公转轨道的大小。
- border-radius: 50%：将地球容器的形状设置为圆形。
- z-index: 2：设置地球容器的层叠顺序为 2，确保地球显示在其他元素之上。
- animation: orbit 36.5s linear infinite;：为地球容器添加名为 orbit 的动画，动画持续时间为 36.5 秒，速度函数为线性，无限循环播放。
地球轨道样式（.earth-orbit）：
- position: absolute：设置地球轨道的定位方式为绝对定位，相对于 .solar-system 容器进行定位。
- top: 50%; left: 50%; transform: translate(-50%, -50%);：将地球轨道的中心定位到 .solar-system 容器的中心。
- width: 500px 和 height: 500px：设置地球轨道的高度和宽度为 500px，与地球容器的大小一致。
- border: 2px dashed #fff：设置地球轨道为白色的虚线边框。
- border-radius: 50%：将地球轨道的形状设置为圆形。
地球样式（.earth）：
- background: #007bff：设置地球的背景颜色为蓝色，模拟地球的海洋颜色。
- height: 60px 和 width: 60px：设置地球的高度和宽度为 60px。
- border-radius: 50%：将地球的形状设置为圆形。
- position: absolute：设置地球的定位方式为绝对定位，相对于 .earth-con 容器进行定位。
- top: 50%; left: 100%; transform: translate(-50%, -50%);：将地球定位到地球容器的边缘。
小行星带样式（.solar-system:after）：
- 使用 :after 伪元素在 .solar-system 容器后面添加一个元素来模拟小行星带。
- content: ""：设置伪元素的内容为空。
- position: absolute：设置伪元素的定位方式为绝对定位，相对于 .solar-system 容器进行定位。
- 通过大量的 box-shadow 属性来模拟小行星带中的小行星分布。
地球公转动画（@keyframes orbit）：
- 0% 关键帧：地球容器初始旋转角度为 0 度。
- 100% 关键帧：地球容器旋转角度为 360 度，完成一次完整的公转。