css3星球绕轨道动画

CSS3 星球绕轨道动画是一个很酷的效果，它可以模拟真实的行星绕轨运动，给页面增添一份动感和科技感。

/* HTML 代码 *//* CSS 代码 */.planet {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    animation: rotatePlanet 5s linear infinite;
}
.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border: 1px dotted #999;
    border-radius: 50%;
    animation: rotateOrbit 10s linear infinite;
}
@keyframes rotatePlanet {
0% {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
}
100% {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}
@keyframes rotateOrbit {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
    

需要注意的是，这里使用了两个关键帧动画。第一个是让星球旋转运动的动画，它的关键帧定义了从0%到100%的旋转状态，以及一些位移的变化，如“translateX(100px)”让星球除了绕轨道运动外，还向外移动了100个像素。

而另一个是让轨道绕中心点旋转的动画，它的关键帧只需要定义0%和100%的旋转状态即可。

想要在页面上加入更多星球，只需要复制“planet”和“orbit”两个元素的代码，并为其设置不同的颜色和大小即可。当然也可以通过增加关键帧，改变运动的速度和方向。

最后，这个动画效果需要浏览器对CSS3的支持，IE8及以下版本的浏览器不支持。所以在应用上线之前需要进行测试，以确保兼容性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！