作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我一直关注this tutorial .30分钟后有动画变化到白天和黑夜它非常好,我喜欢它,但我在想如何在真实的白天进行这种改变,所以它在我的实时工作,白天和黑夜的变化取决于白天和黑夜的实时时间,我不知道该怎么做请帮帮我这里的代码:-
<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>
body{
overflow:hidden;
}
#clouds, #sky, #night, #stars{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
}
#sky{
background:#fff url(../images/sky.png) repeat-x top left;
z-index:1;
}
#sun_yellow{
position:absolute;
left:45%;
top:50%;
width:150px;
height:152px;
background:transparent url(../images/sun.png) no-repeat center center;
z-index:2;
}
#sun_red{
position:absolute;
left:45%;
top:50%;
width:150px;
height:152px;
background:transparent url(../images/sun2.png) no-repeat center center;
z-index:2;
opacity:0;
}
#clouds{
background:transparent url(../images/clouds.png) repeat-x top left;
z-index:3;
}
#ground{
position:absolute;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:232px;
background:transparent url(../images/ground.png) repeat-x bottom center;
z-index:3;
}
#night{
background-color:#000;
z-index:4;
opacity:0;
}
#stars{
bottom:200px;
background:transparent url(../images/stars.png) repeat bottom center;
z-index:5;
opacity:0;
}
#sstar{
position:absolute;
left:40%;
top:10%;
width:126px;
height:80px;
background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
z-index:5;
opacity:0;
}
#moon{
position:absolute;
left:45%;
top:60%;
width:168px;
height:168px;
background:transparent url(../images/moon.png) no-repeat center center;
z-index:6;
opacity:0;
}
$(function() {
$('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
$('#stars').animate({'opacity':1}, 5000,function(){
$('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
$('#sstar').animate({'opacity':1}, 300);
$('#sstar').animate({
'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
}, 500);
});
});
});
$('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
$('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
$('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
$('#night').animate({'opacity':0.8}, 20000);
});
最佳答案
你必须用机器上的当前时间来抵消你的时间。我为你做了一个小例子。此示例显示 10 秒时间窗口内的动画。可以通过将 time_window
增加到一整天 (1000 * 60 * 60 * 24) 来更改此窗口。
它不使用基本动画,而是使用 requestAnimationFrame
和当前时间。这使您可以直接控制动画和时间。设置 CSS 动画可能会受制于 CPU 速度和/或在选项卡未处于事件状态时禁用动画。
var running = true;
var time_window = 1000 * 60 * 0.1;
function runDay() {
if (running) {
var now = Date.now() % time_window;
var offset = Math.sin(now * (2 * Math.PI / time_window)) * 25 + 35;
$('.sun').css('top', offset + '%');
}
window.requestAnimationFrame(runDay);
}
runDay();
body {
background-color: #55b;
}
.earth {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 50%;
background-color: #5b5;
z-index: 3;
}
.sun {
position: absolute;
background-color: #bb5;
left: 10%;
top: 10%;
width: 10vmin;
height: 10vmin;
border-radius: 10vmin;
z-index: 2;
s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="earth"></div>
<div class="sun"></div>
这个例子使用了requestAnimationFrame
方法。然而,如果您要在 24 小时内移动太阳,则以 60fps 的速度运行可能有点矫枉过正。为了在您的设备上轻松运行,您可能希望运行较少的更新。这可以使用 setTimeout
方法和代码段中显示的相同递归调用来实现。
function doRecursive() {
setTimeout(doRecursive, 1000); // run every second
}
doRecursive();
太阳的移动速度并不快。人们可能不会注意到任何口吃。
关于javascript - 改变css样式取决于真实的白天和黑夜时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39572238/
我是一名优秀的程序员,十分优秀!