Как бы добавить градиент к цвету фона в цветные часы?

-1

Как бы добавить градиент к цвету фона? Я бы хотел, чтобы часы и минуты контролировали цвет и секунды для контроля градиента. Для пульсирующего эффекта, начиная с центра, причем каждая секунда делает кольцо такого цвета темнее и темнее.Как бы добавить градиент к цвету фона в цветные часы?

var clock, hour, min, sec, color; 
 

 
function displayTime(){ 
 
clock=new Date(); 
 
hour=clock.getHours(), 
 
min=clock.getMinutes(), 
 
sec=clock.getSeconds(); 
 

 
//if single digit, add 0 to the left 
 
if(hour<=9) hour='0'+hour; 
 
if(min<=9) min='0'+min; 
 
if(sec<=9) sec='0'+sec; 
 

 
color='#'+hour+min+sec; 
 

 
//set background color 
 
document.body.style.background= color; 
 
document.getElementById('time').innerHTML=""+hour+":"+min+":"+sec+""; 
 

 
//set interval 
 
setInterval(displayTime,1000); 
 
//} 
 
} 
 

 

 
displayTime();

#time{ 
 
\t font-family: 'Bangers', cursive; 
 
    \t color: white; 
 
    \t font-size: 100px; 
 
    \t position: relative; 
 
    \t text-align: center; 
 
    \t padding: 10%; 
 
    \t 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="./dist/style.css"> 
 
    <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div id="time"></div> 
 
    <script type="text/javascript" src="./dist/app-browserify.js"></script> 
 
</body> 
 

 
</html>

источник

2015-05-31 J. E.

Вы можете использовать этот простой метод, чтобы сделать ваш текст смотреть gradienty:

h1 { 
 
    font-size: 72px; 
 
    background: -webkit-linear-gradient(#eee, #333); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-family: 'Segoe UI', sans-serif; 
 
    margin: 0; 
 
}

<h1>This Colour</h1>

В вашем случае, вы можете применить следующие стили для #time.

background: -webkit-linear-gradient(#eee, #333); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;

источник

2015-05-31 18:04:51

Он будет работать только для Chrome, я думаю. – Mustaghees

@Mustaghees Yea !!! ': (' –

Как бы добавить градиент к цвету фона в цветные часы?

ответ

Смежные вопросы