Javascript 添加具有平滑颜色过渡的滚动云的昼夜循环

我有卷云，但我需要一个黎明/黄昏和白天/黑夜周期检测系统时钟。我不知道如何用html或css检测系统时间

我尝试过延迟转换，但它不起作用

*{
保证金：0；
填充：0；
}
身体{
溢出：隐藏；
}
#云彩{
填充：100px0；
背景：c9dbe9；
背景：-webkit线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
背景：-线性梯度（顶部，c9dbe9 0%，fff 100%）；
背景：-moz线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
}
.云{
宽度：200px；
高度：60px；
背景色：#fff；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：相对位置；
}
云：以前，
.云：之后{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100px；
高度：80px；
位置：绝对位置；
顶部：-15px；
左：10px；
边界半径：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-moz变换：旋转（30度）；
}
.云：之后{
宽度：120px；
高度：120px；
顶部：-55px；
左：自动；
右：15px；
}
.x1{
左：-250px；
-webkit变换：比例（0.4）；
-moz变换：比例（0.4）；
变换：比例（0.4）；
-webkit动画：移动云120s线性无限；
-moz动画：moveclouds 120s线性无限；
-o动画：移动云120s线性无限；
}
.x2{
右：70px；
顶部：-100px；
-webkit变换：比例（0.5）；
-moz变换：比例（0.5）；
变换：比例（0.5）；
不透明度：0.7；
-webkit动画：移动云140s线性无限；
-moz动画：moveclouds 140s线性无限；
-o动画：移动云140s线性无限；
}
.x3{
左：-550px；
顶部：-200px；
-webkit变换：比例（0.4）；
-moz变换：比例（0.4）；
变换：比例（0.4）；
不透明度：0.8；
-webkit动画：移动云150s线性无限；
-moz动画：moveclouds 150s线性无限；
-o动画：移动云150s线性无限；
}
.x4{
左：400px；
顶部：-250px；
-webkit变换：比例（0.6）；
-moz变换：比例（0.6）；
变换：比例（0.6）；
不透明度：0.75；
-webkit动画：移动云100秒线性无限；
-moz动画：moveclouds 100秒线性无限；
-o-动画：移动云100秒线性无限；
}
.x5{
左：-750px；
顶部：-250px；
-webkit变换：比例（0.47）；
-moz变换：比例（0.47）；
变换：比例（0.47）；
不透明度：0.8；
-webkit动画：移动云110s线性无限；
-moz动画：moveclouds 110s线性无限；
-o动画：移动云110s线性无限；
}
@-webkit关键帧移动云{
0% {
左边距：1000px；
}
100% {
左边距：-1000px；
}
}
@-moz关键帧移动云{
0% {
左边距：1000px；
}
100% {
左边距：-1000px；
}
}
@-o关键帧移动云{
0% {
左边距：1000px；
}
100% {
左边距：-1000px；
}
}

试试这个

var dt=新日期（）；
var h=dt.getHours（）；
var m=dt.getMinutes（）；
变量时间=h+'：'+m
如果（h==17）{
如果（m>30）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#E0DE3F 0%，#fff 100%）”
})
}
}
否则，如果（h>17）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#E0DE3F 0%，#fff 100%）”
})
}
else如果（h==18）{
如果（m>30）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#323232 0%，#fff 100%）”
})
}
}
否则，如果（h>18）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#323232 0%，#fff 100%）”
})
}
如果（h==5），则为else{
如果（m>=30）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#E0DE3F 0%，#fff 100%）”
})
}
}
否则，如果（h>5&&h<17）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#E0DE3F 0%，#fff 100%）”
})
}
else如果（h==6）{
如果（m>=30）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#c9dbe9 0%，#fff 100%）”
})
}
}
否则，如果（h>6&&h<17）{
$（“#云”）.css({
背景：“-webkit线性梯度（顶部，#c9dbe9 0%，#fff 100%）”
})
}

*{margin:0；padding:0；}
身体{
溢出：隐藏；
}
#云彩{
填充：100px0；
背景：c9dbe9；
背景：-webkit线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
背景：-线性梯度（顶部，c9dbe9 0%，fff 100%）；
背景：-moz线性梯度（顶部，#c9dbe9 0%，#fff 100%）；
}
.云{
宽度：200px；高度：60px；
背景色：#fff；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：相对位置；
}
.cloud:之前，.cloud:之后{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100px；高度：80px；
位置：绝对；顶部：-15px；左侧：10px；
边界半径：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-moz变换：旋转（30度）；
}
.云：之后{
宽度：120px；高度：120px；
顶部：-55px；左侧：自动；右侧：15px；
}
.x1{
左：-250px；
-webkit变换：比例（0.4）；
-moz变换：比例（0.4）；
变换：比例（0.4）；
-webkit动画：移动云120s线性无限；
-moz动画：moveclouds 120s线性无限；
-o动画：移动云120s线性无限；
}
.x2{
右：70像素；顶部：-100像素；
-webkit变换：比例（0.5）；
-moz变换：比例（0.5）；
变换：比例（0.5）；
不透明度：0.7；
-webkit动画：移动云140s线性无限；
-moz动画：moveclouds 140s线性无限；
-o动画：移动云140s线性无限；
}
.x3{
左侧：-550px；顶部：-200px；
-webkit变换：比例（0.4）；
-moz变换：比例（0.4）；
变换：比例（0.4）；
不透明度：0.8；
-webkit动画：移动云150s线性无限；
-moz动画：moveclouds 150s线性无限；
-o动画：移动云150s线性无限；
}
.x