使用CSS展现出各行星轨道

最新推荐文章于 2025-03-17 11:38:31 发布

把怪物藏起来

最新推荐文章于 2025-03-17 11:38:31 发布

阅读量998

点赞数

分类专栏：前端内容文章标签： css3 html 前端

本文链接：https://blog.youkuaiyun.com/weixin_51929568/article/details/123290846

版权

前端内容专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用CSS的关键帧动画（@keyframes）和transform-origin属性，来创建一个视觉效果逼真的太阳系模型，让行星围绕太阳逆时针旋转。通过实例展示了水星、金星、地球、火星、木星、土星、天王星和海王星的轨道和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	/*使用keyframes创建名为rotate的动画，用于让各行星绕轨道运动*/
    @keyframes rotate{
        100% {
            transform: rotate(-360deg);/*让各行星逆时针做圆周运动*/
        }
    }
    .solarsys {
        width: 800px;
        height: 800px;
        margin: 0 auto;
        background-color: black;
        position: relative;
    }
    /*太阳*/
    .sun {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rgb(248,107,35);
        /*以盒子的左上角为基准将整个盒子移动到正中间，则用外面的盒子一半宽高减去自身一半的宽高*/
        left: 350px;
        top: 350px;
        /*将盒子设置成圆形*/
        border-radius: 50%;
        /*box-shadow中前面两个参数设置水平和垂直阴影，如果第一个设置正值，第二个设置为0，则就是给盒子右边添加阴影；如果第一个设置负值，第二个设置为0，则就是给盒子左边添加阴影；如果第一个设置为0，第二个设置为正值，则就是给盒子下边添加阴影；如果第一个设置为0，第二个设置为负值，则就是给盒子上面添加阴影；如果第一个和第二个都设置为正值，则是给右下角设置阴影；如果第一个和第二个都设置为负值，则就是给盒子左上角添加阴影；如果给第一个设置正值，第二个设置为负值，则就是给盒子的右上角添加阴影；如果第一个值设置为负值，第二个设置为正值，则就是给盒子的左下角添加阴影。所以为了让阴影均匀显示应该设置四个阴影*/
        box-shadow: 5px 5px 10px rgb(248,107,35),-5px -5px 10px rgb(248,107,35),-5px 5px 10px rgb(248,107,35),5px -5px 10px rgb(248,107,35);
    }
    /*水星轨道*/
    .mercuryOrbit {
        position: absolute;
        width: 125px;
        height: 125px;
        /*将盒子的背景设置为透明*/
        background-color: transparent;
        top: 337px;
        left: 337px;
        border-radius: 50%;
        border: 1px dashed #808080;
    }
    /*水星*/
    .mercury {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: rgb(116, 138, 56);
        /*将水星的中点放在水星轨道正左侧上面*/
        top: 395px;/*400px-5px*/
        left: 332px;/*337px-5px*/
        border-radius: 50%;
        /*transform-origin用来设置盒子以哪个点进行转变，这里水星的中心以太阳的中心点进行转变，以盒子的左上角为原点，则水星的中心以太阳为中心，x和y的偏移量分别为，5px（水星的半径）+62.5px（水星轨道的半径）=67.5px，5px（水星半径）*/
        transform-origin: 67.5px 5px;
        /*使用animation绑定动画，规定所绑定动画的名字为rotate，做完一次动画所用时间为1.5s，规定播放动画的次数为infinite即无限次，规定动画的速度曲线为linear即动画从头到尾播放的速度是相同的*/
        animation: rotate 1.5s infinite linear;
    }
	/*金星轨道*/
    .venusOrbit {
        position: absolute;
        width: 160px;
        height: 160px;
        background-color: transparent;
        top: 320px;
        left: 320px;
        border: 1px dashed gray;
        border-radius: 50%;
    }
	/*金星*/
    .venus {
        position: absolute;
        width: 22px;
        height: 22px;
        background-color: rgb(246, 157, 97);
        top: 389px;
        left: 309px;
        border-radius: 50%;
        transform-origin: 91px 11px;
        animation: rotate 3.84s infinite linear;
    }
	/*地球轨道*/
    .earthOrbit {
        position: absolute;
        width: 240px;
        height: 240px;
        background-color: transparent;
        top: 280px;
        left: 280px;
        border: 1px dashed gray;
        border-radius: 50%;
    }
	/*地球*/
    .earth {
        position: absolute;
        width: 18px;
        height: 18px;
        background-color: rgb(115, 114, 174);
        top: 391px;
        left: 271px;  
        border-radius: 50%; 
        transform-origin: 129px 9px;
        animation: rotate 6.25s infinite linear;
    }
	/*火星轨道*/
    .marsOrbit {
        position: absolute;
        width: 340px;
        height: 340px;
        background-color: transparent;
        border: 1px dashed gray;
        border-radius: 50%;
        top: 230px;
        left: 230px;
    }
	/*火星*/
    .mars {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: rgb(140, 119, 63);
        border-radius: 50%;
        top: 392px;
        left: 222px;
        transform-origin: 178px 8px;
        animation: rotate 11.75s infinite linear;
    }
	/*木星轨道*/
    .jupiterOrbit {
        position: absolute;
        width: 490px;
        height: 490px;
        background-color: transparent;
        border: 1px dashed gray;
        border-radius: 50%;
        top: 155px;
        left: 155px;
    }
	/*木星*/
    .jupiter {
        position: absolute;
        width: 42px;
        height: 42px;
        background-color: rgb(156,164,143);
        border-radius: 50%;
        top: 379px;
        left: 134px;
        transform-origin: 257px 12px;
        animation: rotate 74.04s infinite linear;
    }
	/*土星轨道*/
    .saturnOrbit {
        position: absolute;
        width: 590px;
        height: 590px;
        background-color: transparent;
        border: 1px dashed gray;
        border-radius: 50%;
        top: 105px;
        left: 105px;
    }
	/*土星*/
    .saturn {
        position: absolute;
        width: 26px;
        height: 26px;
        background-color: rgb(215,171,68);
        border-radius: 50%;
        top: 387px;
        left: 92px;
        transform-origin: 308px 13px;
        animation: rotate 183.92s infinite linear;
    }
	/*天王星轨道*/
    .uranusOrbit {
        position: absolute;
        width: 690px;
        height: 690px;
        background-color: transparent;
        border: 1px dashed gray;
        border-radius: 50%;
        top: 55px;
        left: 55px;
    }
	/*天王星*/
    .uranus {
        position: absolute;
        width: 28px;
        height: 28px;
        background-color: rgb(164,192,206);
        border-radius: 50%;
        top: 386px;
        left: 41px;
        transform-origin: 359px 14px;
        animation: rotate 524.46s infinite linear;
    }
	/*海王星轨道*/
    .neptuneOrbit {
        position: absolute;
        width: 760px;
        height: 760px;
        background-color: transparent;
        border: 1px dashed gray;
        border-radius: 50%;
        top: 20px;
        left: 20px;
    }
	/*海王星*/
    .neptune {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: rgb(133,136,180);
        border-radius: 50%;
        top: 390px;
        left: 10px;
        transform-origin: 390px 10px;
        animation: rotate 1028.76s infinite linear;
    }

</style>
</head>
<body>
    <div class="solarsys">
        <!-- 太阳 -->
        <div class="sun"></div>
        <!-- 水星轨道 -->
        <div class="mercuryOrbit"></div>
        <!-- 水星 -->
        <div class="mercury"></div>
        <!-- 金星轨道 -->
        <div class="venusOrbit"></div>
        <!-- 金星 -->
        <div class="venus"></div>
        <!-- 地球轨道 -->
        <div class="earthOrbit"></div>
        <!-- 地球 -->
        <div class="earth"></div>
        <!-- 火星轨道 -->
        <div class="marsOrbit"></div>
        <!-- 火星 --> 
        <div class="mars"></div>
        <!-- 木星轨道 -->
        <div class="jupiterOrbit"></div>
        <!-- 木星 -->
        <div class="jupiter"></div>
        <!-- 土星轨道 -->
        <div class="saturnOrbit"></div>
        <!-- 土星 -->
        <div class="saturn"></div>
        <!-- 天王星轨道 -->
        <div class="uranusOrbit"></div>
        <!-- 天王星 -->
        <div class="uranus"></div>
        <!-- 海王星轨道 -->
        <div class="neptuneOrbit"></div>
        <!-- 海王星 -->
        <div class="neptune"></div>
    </div>
</body>
</html>

rotate()
CSS的rotate()函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用transform-origin属性设置自己的自定义变换原点。
如果不设置transform-origin则元素就会默认以元素的中心为旋转点，则元素就不会绕着太阳旋转

transform-origin
transform-origin CSS属性让你更改一个元素变形的原点。
转换起点是应用转换的点。例如，rotate()函数的转换原点是旋转中心。（这个属性的应用原理是先用这个属性的赋值转换该元素，进行变形，然后再用这个属性的值把元素转换回去）
默认的转换原点是 center

（具体rotate（）和transform-origin参考MDN）