Question

我一直关注this tutorial。它在30分钟到昼夜都有动画变化它非常好我喜欢它但我正在考虑如何在真实的白天进行这种改变，所以它在我的实时工作和日夜改变取决于日夜的实时我不知道如何做到这一点任何人都可以帮助我这里的代码： -

HTML

<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>

CSS

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;
}

JS

$(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);
});

Answer 1

您必须按照机器上的当前时间来抵消您的计时。我为你做了一个小例子。此示例显示10秒的时间窗口上的动画。可以通过将time_window增加到一整天（1000 * 60 * 60 * 24）来更改此窗口。

它不使用基本动画，而是使用requestAnimationFrame和当前时间。这使您可以直接控制动画和时间。当选项卡未激活时，设置CSS动画可能会受到CPU速度和/或禁用动画的影响。

＆＃13;

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();

＆＃13;

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
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="earth"></div>
<div class="sun"></div>

＆＃13;

效果

此示例使用requestAnimationFrame方法。然而，如果你要在24小时内移动太阳，那么运行60fps可能有点矫枉过正。要轻松使用某些设备，您可能希望运行较少的更新。这可以使用setTimeout方法和片段中显示的相同递归调用来实现。

function doRecursive() {
    setTimeout(doRecursive, 1000); // run every second
}
doRecursive();

看到太阳并没有快速移动。人们可能不会注意到任何口吃。

Answer 2

一种可能的方法是为您的内容设置一个包装div

<div id="idDayTime" class="day">
   .... content of the page ...
</div>

然后你必须在你的javascript中有这样的东西

setInterval(function(){ 
   ... check time of day ...
   ... assign corresponding css class to the idDayTime div ...
}, 60000);

基本上它应该每小时检查一次并改变主题。

你应该包括包装样式定义：

.day{
  .content{
  };
};
.evening{
  .content{
  };
};

而且，一旦你进入页面，不要忘记设置主题。

Answer 3

由于白天和黑夜之间的变化不会经常发生，因此您不需要动画。

您只需要使用JS获取浏览器时间 e.g。

var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

和if-Statements决定应该应用哪个CSS，你可以在这里花上几个小时。

Answer 4

以下片段正在检查当前时间（24小时格式）。

它不是创建一些日夜css类，而是在html元素内联style属性的末尾推送一些css规则。

这样，这个css规则对任何其他规则具有最高优先级。

它非常便携，无需修改任何html或css，我们可以通过将它们链接在一行来设置许多css规则。

 /* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";background-color:#023202;color:#00d300"
}
function dayStyle(){
  document.documentElement.style += ";background-color:white;color:#000"
}

Hello world!

使用css过滤规则可以提供非常好的和令人惊讶的结果，只需使用均衡的颜色：

/* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";filter:invert(1)"
}
function dayStyle(){
  document.documentElement.style += ";filter:invert(0)"
}

hello world!

改变css风格取决于真实的白天和黑夜时间

HTML

CSS

JS

4 个答案:

效果