Transição CSS Gradientes Céu - Tempo

[Robson Curvello 0]

Olá Pessoal!

 

Estou com dificuldades em realizar a transição de gradientes de acordo com a hora local.

 

Tenho 24 gradientes em CSS diferentes e cada um deles representa uma hora do dia.

Como fazer a transição entre eles de acordo com a hora do dia de maneira continua? ou seja em tempo real?

[Marlon Pacheco 132]

Acho que você pode tentar uma solução nesse sentido: http://codepen.io/marlonlp/pen/iuBEh

Se puder explicar melhor, fica mais fácil de pensar em uma solução?

Tu tem arquivos CSS separados? São apenas classes diferentes?

[Robson Curvello 0]

nao era bem isso é um pouco mais complexo...

 

Tipo assim:

 

tenho 24 classes com gradientes diferentes eu consigo fazer a transição entre eles... mas nao consigo fazer em tempo real ou seja assim que o site abrir ele carregar a classe correspondente ao horário e ir fazendo a transição em tempo real (segundo a segundo até carregar as classes seguintes)....

 

se o site ficar aberto por 24h sem o usuário fechar ele vai fazendo a transição entre as 24 classes.

[Marlon Pacheco 132]

Fiz o básico, agora é só incrementar um pouco mais.

Você pode criar uma função que faça a troca das classes de acordo com o horário e colocá-la num setInterval();

Atualizei o exemplo:

http://codepen.io/marlonlp/pen/iuBEh