Question

我如何为背景颜色添加渐变？我想用小时和分钟来控制颜色和控制渐变的秒数。对于从中心开始的脉动效果，每一秒都像一个颜色的环变得更暗和更暗。

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{
	font-family: 'Bangers', cursive;
 	color: white;
 	font-size: 100px;
 	position: relative;
 	text-align: center;
 	padding: 10%;
 	
}

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

Answer 1

您可以使用这种简单的方法使文字看起来是渐变的：

＆＃13;

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

＆＃13;

<h1>This Colour</h1>

＆＃13;

在您的情况下，您可以为#time应用以下样式。

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

如何在彩色时钟中添加渐变到背景颜色？

1 个答案: