css3 星球椭圆运动轨迹

　　CSS3中新增了很多强大的特性，比如我们今天所要讲的星球椭圆运动轨迹。相信你看过各种影视作品中，星球绕着外星人飞行的场景吧，这种运动是非常具有震撼力的，今天我们就来一起学习如何使用CSS3实现这个效果。

div class="code">
/* 首先我们先来写一个包含星球和行星的容器 */.container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
/* 接下来我们要做的是定义星球和行星的样式 */.planet {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ffcc00;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 将星球置于容器中心 */animation: planetOrbit 5s linear infinite;
/* 使用animation属性定义星球的运动轨迹和速度 */}
.star {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 将行星置于容器中心 */animation: starOrbit 7s linear infinite;
/* 使用animation属性定义行星的运动轨迹和速度 */}
/* 最后，我们定义星球和行星运动的轨迹 */@keyframes planetOrbit {
from {
    transform: translate(-100px, 0) rotate(0deg);
/* 星球一开始位于垂直正上方，起点横坐标为-100px */}
to {
    transform: translate(100px, 0) rotate(360deg);
/* 星球以每秒720度的速度绕着行星旋转，终点横坐标为100px */}
}
@keyframes starOrbit {
from {
    transform: translate(0, -100px) rotate(0deg);
/* 行星一开始位于垂直正左方，起点纵坐标为-100px */}
to {
    transform: translate(0, 100px) rotate(360deg);
/* 行星以每秒720度的速度绕着星球旋转，终点纵坐标为100px */}
}
    /div>
    

　　以上是实现星球椭圆运动轨迹的全部代码，如果你仔细研究，就会发现其实这个效果并没有那么难。关键在于对animation这个CSS3属性的掌握，它可以让元素进行复杂而流畅的动画效果。在今后的前端开发中，我们可以用到类似的技巧来打造更加炫酷的UI效果。

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