声明：此项目来源于网络。
html代码部分
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Clock UI desgin</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clock">
<h2>The time is now</h2>
<div id="time">
<div><span id="hour">00</span> <span>Hours</span></div>
<div><span id="Minutes">00</span> <span>Minutes</span></div>
<div><span id="Second">00</span> <span>Second</span></div>
</div>
</div>
<script type="text/javascript">
function clcok(){
var hours = document.getElementById('hour');
var Minutes = document.getElementById('Minutes');
var Second = document.getElementById('Second');
var h = new Date().getHours();
var m = new Date().getMinutes();
var s = new Date().getSeconds();
hours.innerHTML = h;
Minutes.innerHTML = m;
Second.innerHTML = s;
}
var interval = setInterval(clcok , 1000);
</script>
</body>
CSS部分
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&diaplay=swap');
*{
margin: 0;
padding: 0%;
box-sizing: border-box;
font-family: 'Open Sans' , sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060a1f;
}
#clock h2{
position: relative;
display: block;
color: #ffffff;
text-align: center;
margin: 10px 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: 0.8em;
}
#clock #time{
display: flex;
}
#clock #time div{
position: relative;
margin: 0 5px;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0004);
}
#clock #time div span{
position:relative;
display:block;
100px;
height:80px;
background: #2196f3;
color: #ffffff;
font-weight: 300;
display: flex;
justify-content: center;
font-size: 3em;
z-index: 10;
box-shadow: 0 0 0 1px rgba(0 , 0 , 0 , .2);
}
#clock #time div span:nth-child(2){
height: 30px;
font-size: 0.7em;
letter-spacing: 0.2em;
font-weight: 500;
z-index: 9;
box-shadow: none;
background: #127fd6;
text-transform: uppercase;
}
#clock #time div:last-child span{
background: #ff006a;
}
#clock #time div:last-child span:nth-child(2){
background: #ec0062;
}
显示效果：
