我正在使用mourner/suncalc的一个功能,它可以让我获得太阳的当前位置。使用getPosition()
,我想在图像或纯CSS上创建动画(当然可以缩放到不同的屏幕分辨率和方向),在那里你可以在页面上实时看到太阳的位置。一个完全不必要的功能,但有趣的功能:)下面的图片说明了我的想法。
就像我说的那样,我将使用mourner函数中的getPosition()
函数来打印azimuth和太阳的高度。我现在面临的问题是,以某种方式将这些数据转换为百分比或像素,因此上面示例图像中的太阳沿着圆线移动(是的,太阳必须被模仿地面的直线阻挡),在现实生活中模仿天空中的真实位置。
方位角数据看起来像-0.7000179547193575,高度如下:-0.699671080144066(基于我现在所处的当前太阳位置)。
我该如何做到这一点?我可以使用纯CSS执行此操作,还是必须使用图像执行此操作?
我不知道确切的公式,但这里有一个想法,你如何使用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
元素并将太阳放置在正确的位置。
您可以使用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>