Question

我想创建一个带有过渡的日夜背景。这是我到目前为止：DEMO。

这就是我日夜改变的方式，但我不能将它们淡化为彼此

CSS：

.day
{
    background-image: linear-gradient(orange,lightyellow);
}
.night
{
    background-image: linear-gradient(#111111,darkblue);
}

JQUERY：

function dayAndNight(){
    if($('#achtergrond').attr('class')== "night")
            $('#achtergrond').toggleClass('night day');
    else if($('#achtergrond').attr('class')== "day")
            $('#achtergrond').toggleClass('day night');
}

setInterval(function(){dayAndNight();},2000);

我怎样才能白天昼夜褪去？

Answer 1

首先。如果你想做一个白天和黑夜的过渡。 setInterval（）函数 javascript是一个非常糟糕的主意。如果你使用getHours（）函数会更好。

var date = new Date(); 
var h = date.getHours(); 
alert(h);

您将获得当前时间。现在你可以得到像

这样的if语句

if(h>6){
   //Its Evening
}

这是一款久经考验的代码，适合您想要的日夜转换。

var date = new Date(); 
var h = date.getHours();
if(h<6){
    $('#achtergrond').attr('class','day');
    $('#achtergrond').fadeIn();
}else{
    $('#achtergrond').attr('class','night');    
    $('#achtergrond').fadeIn();
}

Answer 2

背景图像转换可以通过以下步骤实现一些动画效果 -

通过（-0.1）
添加10毫秒的小延迟并执行步骤1，直到不透明度达到0.
为元素设置新的背景图像。

如何进行背景图像转换？

2 个答案: