[分享]css做卫星旋转坐标获取

卫星旋转坐标获取是一个比较实用的功能，使用CSS可以轻松实现。在CSS中，可以通过使用transform属性来实现物体的旋转，同时还要使用keyframes规则来定义旋转动画。/ 定义旋转动画 / k...

卫星旋转坐标获取是一个比较实用的功能，使用CSS可以轻松实现。在CSS中，可以通过使用transform属性来实现物体的旋转，同时还要使用@keyframes规则来定义旋转动画。

/* 定义旋转动画 */
@keyframes rotate-satellite {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 定义卫星样式 */
.satellite {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: rotate-satellite 10s linear infinite;
}

/* 计算坐标 */
function getCoordinate(radius, angle) {
    var x = radius * Math.cos(angle * Math.PI / 180);
    var y = radius * Math.sin(angle * Math.PI / 180);
    return {
        x: x,
        y: y
    };
} 

上述CSS代码定义了一个名为“satellite”的class，它使用绝对定位将卫星放置于屏幕正中央。通过@keyframes规则定义了一个名为“rotate-satellite”的动画，它将卫星按照顺时针方向旋转一圈。

接着，在JavaScript中可以使用getCoordinate函数来计算卫星旋转时的坐标。该函数需要传入两个参数：卫星的半径和当前旋转的角度。它将返回一个包含x和y坐标的对象。

// 获取元素
var satellite = document.querySelector('.satellite');

// 设置坐标
setInterval(function() {
    var radius = 150;
    var angle = (new Date().getTime() / 20) % 360;
    var pos = getCoordinate(radius, angle);
    satellite.style.left = pos.x + 'px';
    satellite.style.top = pos.y + 'px';
}, 30); 

最后，在JavaScript中使用setInterval函数定时调用getCoordinate函数，然后将卫星的left和top属性设置为计算出来的坐标即可。这样，就能够实现卫星旋转时位置的动态更新。