实时显示太阳在天空上的位置-如何？

Question

我正在使用mourner/suncalc中的函数，该函数可以让我获取太阳的当前位置。使用SgListItems，我想在图像或纯CSS（当然，可以缩放到不同的屏幕分辨率和方向）上创建动画，在这里您可以在页面上实时看到太阳在哪里。一个完全不必要的功能，但一个有趣的功能:)下图说明了我的想法。

就像我说的那样，我将使用哀悼者函数中的:on函数，该函数打印azimuth和太阳的高度。我现在面临的问题是，以某种方式将此数据转换为百分比或像素，因此上面示例中的太阳沿圆线移动（是的，太阳必须被模仿地面的直线遮挡），模仿现实生活中天空的真实位置。

方位角数据看起来像-0.7000179547193575，海拔高度是这样的：-0.699671080144066（基于我现在所在的当前太阳位置）。

我该如何完成？我可以使用纯CSS来做到这一点，还是必须使用图像来做到这一点？

Answer 1

我不知道确切的公式，但是这里有一个想法，您可以使用CSS创建此公式，然后只需调整不同的值即可。

var sun = document.querySelector('.sun');

function update() {
  var x = Math.random() * 180;
  var y = Math.random() * 40;
  sun.style.transform="rotateX("+y+"deg) rotate("+x+"deg)"
}

.container {
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
}
.sun {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:1px solid grey;
  transform:rotateX(20deg) rotate(20deg);
  background:
    linear-gradient(red,red) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.sun:before {
  content:"";
  position:absolute;
  top:calc(50% - 20px);
  left:-20px;
  width:40px;
  height:40px;
  background:yellow;
  border-radius:50%;
}

<div class="container">
<div class="sun">

</div>
</div>
<button onclick="update()">update</button>

使用下面的代码，您只需要将值转换为度数即可旋转sun元素并将太阳放置在正确的位置。

Answer 2

您可以使用 JavaScript 更改css值，我看不到其他任何方式

    /* yes this JS code */
    const
      MvSun = document.getElementById('Mv-Sun'),
      Sun   = document.getElementById('sun')
    ;

    MvSun.onclick = function() {
      Sun.style.left = '200px';
    }

    #celestial-vault {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: skyblue;
      display: block;
    }

    #sun {
      position: absolute;
      top: 10px;
      left: 20px;
      background-color:yellow;
      width:20px;
      height:20px;
      border-radius: 10px;
      display: block;
    }

  <div id="celestial-vault">
      <div id="sun"></div>
  </div>

  <button id="Mv-Sun">move sun</button>