Html在线时钟Demo

2,433次阅读

在线预览

Html 在线时钟 Demo

index.html 代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, initial-scale=1.0, minimum-scale=1.0">
		<title> 时钟 </title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/card.css">
		<script src="js/main.js"></script>
		<style>
			body{display:flex;justify-content: center; align-items:center;text-align:center;}
		</style>
	</head>
	<body>
		<div class="card">
			<div id="clock"></div>
		</div>
	</body>
</html>

style.css 代码 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {/* background-color: #f2f2f2; */}
.pixel {
  /* background-color: #fff; */
  border: 2px solid ;
  border-radius: 50%;
  box-shadow: rgba(0,0,0,0.3) 0 2px 2px, inset rgba(0,0,0,0.1) 0 2px 2px;
  box-sizing: border-box;
  display: inline-block;
  height: 38px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 38px;
}
.hand {
  background-color: #000000;
  left: 16px;
  position: absolute;
  transform: rotate(0deg);
  transition: transform 500ms ease-in-out;
  width: 2px;
}
.hand_hour {
  height: 12px;
  top: 6px;
  transform: rotate(-60deg);
  transform-origin: 50% 97%;
}
.hand_minute {
  height: 16px;
  top: 2px;
  transform: rotate(60deg);
  transform-origin: 50% 97%;
}
.number {
  display: inline-block;
  height: 230px;
  margin: 8px;
  overflow: hidden;
  width: 310px;
}
.digit {
  display: inline-block;
  height: 228px;
  line-height: 0;
  position: relative;
  width: 152px;
}
.digit_0 .pixel:nth-child(1) .hand_hour,
.digit_0 .pixel:nth-child(6) .hand_hour {transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(1) .hand_minute,
.digit_0 .pixel:nth-child(6) .hand_minute {transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(2) .hand_hour,
.digit_0 .pixel:nth-child(3) .hand_hour,
.digit_0 .pixel:nth-child(22) .hand_hour,
.digit_0 .pixel:nth-child(23) .hand_hour {transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(2) .hand_minute,
.digit_0 .pixel:nth-child(3) .hand_minute,
.digit_0 .pixel:nth-child(22) .hand_minute,
.digit_0 .pixel:nth-child(23) .hand_minute {transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(4) .hand_hour,
.digit_0 .pixel:nth-child(7) .hand_hour {transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(4) .hand_minute,
.digit_0 .pixel:nth-child(7) .hand_minute {transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(5) .hand_hour,
.digit_0 .pixel:nth-child(8) .hand_hour,
.digit_0 .pixel:nth-child(9) .hand_hour,
.digit_0 .pixel:nth-child(10) .hand_hour,
.digit_0 .pixel:nth-child(11) .hand_hour,
.digit_0 .pixel:nth-child(12) .hand_hour,
.digit_0 .pixel:nth-child(13) .hand_hour,
.digit_0 .pixel:nth-child(14) .hand_hour,
.digit_0 .pixel:nth-child(15) .hand_hour,
.digit_0 .pixel:nth-child(16) .hand_hour,
.digit_0 .pixel:nth-child(17) .hand_hour,
.digit_0 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_0 .pixel:nth-child(5) .hand_minute,
.digit_0 .pixel:nth-child(8) .hand_minute,
.digit_0 .pixel:nth-child(9) .hand_minute,
.digit_0 .pixel:nth-child(10) .hand_minute,
.digit_0 .pixel:nth-child(11) .hand_minute,
.digit_0 .pixel:nth-child(12) .hand_minute,
.digit_0 .pixel:nth-child(13) .hand_minute,
.digit_0 .pixel:nth-child(14) .hand_minute,
.digit_0 .pixel:nth-child(15) .hand_minute,
.digit_0 .pixel:nth-child(16) .hand_minute,
.digit_0 .pixel:nth-child(17) .hand_minute,
.digit_0 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(18) .hand_hour,
.digit_0 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_0 .pixel:nth-child(18) .hand_minute,
.digit_0 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(19) .hand_hour,
.digit_0 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(19) .hand_minute,
.digit_0 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(1) .hand_hour,
.digit_1 .pixel:nth-child(17) .hand_hour {transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(1) .hand_minute,
.digit_1 .pixel:nth-child(17) .hand_minute {transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(2) .hand_hour,
.digit_1 .pixel:nth-child(22) .hand_hour,
.digit_1 .pixel:nth-child(23) .hand_hour {transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(2) .hand_minute,
.digit_1 .pixel:nth-child(22) .hand_minute,
.digit_1 .pixel:nth-child(23) .hand_minute {transform: rotate(-90deg);
}
.digit_1 .pixel:nth-child(3) .hand_hour,
.digit_1 .pixel:nth-child(6) .hand_hour,
.digit_1 .pixel:nth-child(20) .hand_hour {transform: rotate(-90deg);
}
.digit_1 .pixel:nth-child(3) .hand_minute,
.digit_1 .pixel:nth-child(6) .hand_minute,
.digit_1 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(4) .hand_hour,
.digit_1 .pixel:nth-child(8) .hand_hour,
.digit_1 .pixel:nth-child(9) .hand_hour,
.digit_1 .pixel:nth-child(12) .hand_hour,
.digit_1 .pixel:nth-child(13) .hand_hour,
.digit_1 .pixel:nth-child(16) .hand_hour {transform: rotate(-135deg);
}
.digit_1 .pixel:nth-child(4) .hand_minute,
.digit_1 .pixel:nth-child(8) .hand_minute,
.digit_1 .pixel:nth-child(9) .hand_minute,
.digit_1 .pixel:nth-child(12) .hand_minute,
.digit_1 .pixel:nth-child(13) .hand_minute,
.digit_1 .pixel:nth-child(16) .hand_minute {transform: rotate(-135deg);
}
.digit_1 .pixel:nth-child(5) .hand_hour,
.digit_1 .pixel:nth-child(19) .hand_hour,
.digit_1 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(5) .hand_minute,
.digit_1 .pixel:nth-child(19) .hand_minute,
.digit_1 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(7) .hand_hour,
.digit_1 .pixel:nth-child(10) .hand_hour,
.digit_1 .pixel:nth-child(11) .hand_hour,
.digit_1 .pixel:nth-child(14) .hand_hour,
.digit_1 .pixel:nth-child(15) .hand_hour {transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(7) .hand_minute,
.digit_1 .pixel:nth-child(10) .hand_minute,
.digit_1 .pixel:nth-child(11) .hand_minute,
.digit_1 .pixel:nth-child(14) .hand_minute,
.digit_1 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(18) .hand_hour,
.digit_1 .pixel:nth-child(24) .hand_hour {transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(18) .hand_minute,
.digit_1 .pixel:nth-child(24) .hand_minute {transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(1) .hand_hour,
.digit_2 .pixel:nth-child(9) .hand_hour,
.digit_2 .pixel:nth-child(14) .hand_hour {transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(1) .hand_minute,
.digit_2 .pixel:nth-child(9) .hand_minute,
.digit_2 .pixel:nth-child(14) .hand_minute {transform: rotate(180deg);
}
.digit_2 .pixel:nth-child(2) .hand_hour,
.digit_2 .pixel:nth-child(3) .hand_hour,
.digit_2 .pixel:nth-child(6) .hand_hour,
.digit_2 .pixel:nth-child(10) .hand_hour,
.digit_2 .pixel:nth-child(15) .hand_hour,
.digit_2 .pixel:nth-child(19) .hand_hour,
.digit_2 .pixel:nth-child(22) .hand_hour,
.digit_2 .pixel:nth-child(23) .hand_hour {transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(2) .hand_minute,
.digit_2 .pixel:nth-child(3) .hand_minute,
.digit_2 .pixel:nth-child(6) .hand_minute,
.digit_2 .pixel:nth-child(10) .hand_minute,
.digit_2 .pixel:nth-child(15) .hand_minute,
.digit_2 .pixel:nth-child(19) .hand_minute,
.digit_2 .pixel:nth-child(22) .hand_minute,
.digit_2 .pixel:nth-child(23) .hand_minute {transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(4) .hand_hour,
.digit_2 .pixel:nth-child(7) .hand_hour,
.digit_2 .pixel:nth-child(20) .hand_hour {transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(4) .hand_minute,
.digit_2 .pixel:nth-child(7) .hand_minute,
.digit_2 .pixel:nth-child(20) .hand_minute {transform: rotate(-180deg);
}
.digit_2 .pixel:nth-child(5) .hand_hour,
.digit_2 .pixel:nth-child(18) .hand_hour,
.digit_2 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_2 .pixel:nth-child(5) .hand_minute,
.digit_2 .pixel:nth-child(18) .hand_minute,
.digit_2 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(8) .hand_hour,
.digit_2 .pixel:nth-child(12) .hand_hour,
.digit_2 .pixel:nth-child(13) .hand_hour,
.digit_2 .pixel:nth-child(17) .hand_hour {transform: rotate(0deg);
}
.digit_2 .pixel:nth-child(8) .hand_minute,
.digit_2 .pixel:nth-child(12) .hand_minute,
.digit_2 .pixel:nth-child(13) .hand_minute,
.digit_2 .pixel:nth-child(17) .hand_minute {transform: rotate(180deg);
}
.digit_2 .pixel:nth-child(11) .hand_hour,
.digit_2 .pixel:nth-child(16) .hand_hour,
.digit_2 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(11) .hand_minute,
.digit_2 .pixel:nth-child(16) .hand_minute,
.digit_2 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(1) .hand_hour,
.digit_3 .pixel:nth-child(10) .hand_hour,
.digit_3 .pixel:nth-child(17) .hand_hour {transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(1) .hand_minute,
.digit_3 .pixel:nth-child(10) .hand_minute,
.digit_3 .pixel:nth-child(17) .hand_minute {transform: rotate(180deg);
}
.digit_3 .pixel:nth-child(2) .hand_hour,
.digit_3 .pixel:nth-child(3) .hand_hour,
.digit_3 .pixel:nth-child(6) .hand_hour,
.digit_3 .pixel:nth-child(18) .hand_hour,
.digit_3 .pixel:nth-child(22) .hand_hour,
.digit_3 .pixel:nth-child(23) .hand_hour {transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(2) .hand_minute,
.digit_3 .pixel:nth-child(3) .hand_minute,
.digit_3 .pixel:nth-child(6) .hand_minute,
.digit_3 .pixel:nth-child(18) .hand_minute,
.digit_3 .pixel:nth-child(22) .hand_minute,
.digit_3 .pixel:nth-child(23) .hand_minute {transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(4) .hand_hour,
.digit_3 .pixel:nth-child(7) .hand_hour,
.digit_3 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(4) .hand_minute,
.digit_3 .pixel:nth-child(7) .hand_minute,
.digit_3 .pixel:nth-child(15) .hand_minute {transform: rotate(-180deg);
}
.digit_3 .pixel:nth-child(5) .hand_hour,
.digit_3 .pixel:nth-child(14) .hand_hour,
.digit_3 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(5) .hand_minute,
.digit_3 .pixel:nth-child(14) .hand_minute,
.digit_3 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(8) .hand_hour,
.digit_3 .pixel:nth-child(12) .hand_hour,
.digit_3 .pixel:nth-child(16) .hand_hour,
.digit_3 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(8) .hand_minute,
.digit_3 .pixel:nth-child(12) .hand_minute,
.digit_3 .pixel:nth-child(16) .hand_minute,
.digit_3 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_3 .pixel:nth-child(11) .hand_hour,
.digit_3 .pixel:nth-child(19) .hand_hour,
.digit_3 .pixel:nth-child(24) .hand_hour {transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(11) .hand_minute,
.digit_3 .pixel:nth-child(19) .hand_minute,
.digit_3 .pixel:nth-child(24) .hand_minute {transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(9) .hand_hour,
.digit_3 .pixel:nth-child(13) .hand_hour {transform: rotate(-135deg);
}
.digit_3 .pixel:nth-child(9) .hand_minute,
.digit_3 .pixel:nth-child(13) .hand_minute {transform: rotate(-135deg);
}
.digit_4 .pixel:nth-child(1) .hand_hour,
.digit_4 .pixel:nth-child(3) .hand_hour {transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(1) .hand_minute,
.digit_4 .pixel:nth-child(3) .hand_minute {transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(2) .hand_hour,
.digit_4 .pixel:nth-child(4) .hand_hour,
.digit_4 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(2) .hand_minute,
.digit_4 .pixel:nth-child(4) .hand_minute,
.digit_4 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(5) .hand_hour,
.digit_4 .pixel:nth-child(6) .hand_hour,
.digit_4 .pixel:nth-child(7) .hand_hour,
.digit_4 .pixel:nth-child(8) .hand_hour,
.digit_4 .pixel:nth-child(9) .hand_hour,
.digit_4 .pixel:nth-child(12) .hand_hour,
.digit_4 .pixel:nth-child(16) .hand_hour,
.digit_4 .pixel:nth-child(19) .hand_hour,
.digit_4 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(5) .hand_minute,
.digit_4 .pixel:nth-child(6) .hand_minute,
.digit_4 .pixel:nth-child(7) .hand_minute,
.digit_4 .pixel:nth-child(8) .hand_minute,
.digit_4 .pixel:nth-child(9) .hand_minute,
.digit_4 .pixel:nth-child(12) .hand_minute,
.digit_4 .pixel:nth-child(16) .hand_minute,
.digit_4 .pixel:nth-child(19) .hand_minute,
.digit_4 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(10) .hand_hour,
.digit_4 .pixel:nth-child(13) .hand_hour,
.digit_4 .pixel:nth-child(23) .hand_hour {transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(10) .hand_minute,
.digit_4 .pixel:nth-child(13) .hand_minute,
.digit_4 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(11) .hand_hour,
.digit_4 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(11) .hand_minute,
.digit_4 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(14) .hand_hour {transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(14) .hand_minute {transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(17) .hand_hour,
.digit_4 .pixel:nth-child(18) .hand_hour,
.digit_4 .pixel:nth-child(21) .hand_hour,
.digit_4 .pixel:nth-child(22) .hand_hour {transform: rotate(-135deg);
}
.digit_4 .pixel:nth-child(17) .hand_minute,
.digit_4 .pixel:nth-child(18) .hand_minute,
.digit_4 .pixel:nth-child(21) .hand_minute,
.digit_4 .pixel:nth-child(22) .hand_minute {transform: rotate(-135deg);
}
.digit_5 .pixel:nth-child(1) .hand_hour,
.digit_5 .pixel:nth-child(6) .hand_hour,
.digit_5 .pixel:nth-child(17) .hand_hour {transform: rotate(90deg);
}
.digit_5 .pixel:nth-child(1) .hand_minute,
.digit_5 .pixel:nth-child(6) .hand_minute,
.digit_5 .pixel:nth-child(17) .hand_minute {transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(2) .hand_hour,
.digit_5 .pixel:nth-child(3) .hand_hour,
.digit_5 .pixel:nth-child(7) .hand_hour,
.digit_5 .pixel:nth-child(11) .hand_hour,
.digit_5 .pixel:nth-child(14) .hand_hour,
.digit_5 .pixel:nth-child(18) .hand_hour,
.digit_5 .pixel:nth-child(22) .hand_hour,
.digit_5 .pixel:nth-child(23) .hand_hour {transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(2) .hand_minute,
.digit_5 .pixel:nth-child(3) .hand_minute,
.digit_5 .pixel:nth-child(7) .hand_minute,
.digit_5 .pixel:nth-child(11) .hand_minute,
.digit_5 .pixel:nth-child(14) .hand_minute,
.digit_5 .pixel:nth-child(18) .hand_minute,
.digit_5 .pixel:nth-child(22) .hand_minute,
.digit_5 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_5 .pixel:nth-child(4) .hand_hour,
.digit_5 .pixel:nth-child(12) .hand_hour,
.digit_5 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(4) .hand_minute,
.digit_5 .pixel:nth-child(12) .hand_minute,
.digit_5 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(5) .hand_hour,
.digit_5 .pixel:nth-child(9) .hand_hour,
.digit_5 .pixel:nth-child(16) .hand_hour,
.digit_5 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(5) .hand_minute,
.digit_5 .pixel:nth-child(9) .hand_minute,
.digit_5 .pixel:nth-child(16) .hand_minute,
.digit_5 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(8) .hand_hour,
.digit_5 .pixel:nth-child(19) .hand_hour,
.digit_5 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(8) .hand_minute,
.digit_5 .pixel:nth-child(19) .hand_minute,
.digit_5 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(10) .hand_hour,
.digit_5 .pixel:nth-child(13) .hand_hour,
.digit_5 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(10) .hand_minute,
.digit_5 .pixel:nth-child(13) .hand_minute,
.digit_5 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(1) .hand_hour,
.digit_6 .pixel:nth-child(6) .hand_hour,
.digit_6 .pixel:nth-child(14) .hand_hour {transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(1) .hand_minute,
.digit_6 .pixel:nth-child(6) .hand_minute,
.digit_6 .pixel:nth-child(14) .hand_minute {transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(2) .hand_hour,
.digit_6 .pixel:nth-child(3) .hand_hour,
.digit_6 .pixel:nth-child(7) .hand_hour,
.digit_6 .pixel:nth-child(11) .hand_hour,
.digit_6 .pixel:nth-child(22) .hand_hour,
.digit_6 .pixel:nth-child(23) .hand_hour {transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(2) .hand_minute,
.digit_6 .pixel:nth-child(3) .hand_minute,
.digit_6 .pixel:nth-child(7) .hand_minute,
.digit_6 .pixel:nth-child(11) .hand_minute,
.digit_6 .pixel:nth-child(22) .hand_minute,
.digit_6 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(4) .hand_hour,
.digit_6 .pixel:nth-child(12) .hand_hour,
.digit_6 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(4) .hand_minute,
.digit_6 .pixel:nth-child(12) .hand_minute,
.digit_6 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(5) .hand_hour,
.digit_6 .pixel:nth-child(9) .hand_hour,
.digit_6 .pixel:nth-child(13) .hand_hour,
.digit_6 .pixel:nth-child(16) .hand_hour,
.digit_6 .pixel:nth-child(17) .hand_hour,
.digit_6 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_6 .pixel:nth-child(5) .hand_minute,
.digit_6 .pixel:nth-child(9) .hand_minute,
.digit_6 .pixel:nth-child(13) .hand_minute,
.digit_6 .pixel:nth-child(16) .hand_minute,
.digit_6 .pixel:nth-child(17) .hand_minute,
.digit_6 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(10) .hand_hour,
.digit_6 .pixel:nth-child(18) .hand_hour,
.digit_6 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_6 .pixel:nth-child(10) .hand_minute,
.digit_6 .pixel:nth-child(18) .hand_minute,
.digit_6 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(8) .hand_hour,
.digit_6 .pixel:nth-child(19) .hand_hour,
.digit_6 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(8) .hand_minute,
.digit_6 .pixel:nth-child(19) .hand_minute,
.digit_6 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(1) .hand_hour {transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(1) .hand_minute {transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(2) .hand_hour,
.digit_7 .pixel:nth-child(3) .hand_hour,
.digit_7 .pixel:nth-child(6) .hand_hour {transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(2) .hand_minute,
.digit_7 .pixel:nth-child(3) .hand_minute,
.digit_7 .pixel:nth-child(6) .hand_minute {transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(4) .hand_hour,
.digit_7 .pixel:nth-child(7) .hand_hour {transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(4) .hand_minute,
.digit_7 .pixel:nth-child(7) .hand_minute {transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(5) .hand_hour,
.digit_7 .pixel:nth-child(23) .hand_hour {transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(5) .hand_minute,
.digit_7 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(8) .hand_hour,
.digit_7 .pixel:nth-child(11) .hand_hour,
.digit_7 .pixel:nth-child(12) .hand_hour,
.digit_7 .pixel:nth-child(15) .hand_hour,
.digit_7 .pixel:nth-child(16) .hand_hour,
.digit_7 .pixel:nth-child(19) .hand_hour,
.digit_7 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(8) .hand_minute,
.digit_7 .pixel:nth-child(11) .hand_minute,
.digit_7 .pixel:nth-child(12) .hand_minute,
.digit_7 .pixel:nth-child(15) .hand_minute,
.digit_7 .pixel:nth-child(16) .hand_minute,
.digit_7 .pixel:nth-child(19) .hand_minute,
.digit_7 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(9) .hand_hour,
.digit_7 .pixel:nth-child(10) .hand_hour,
.digit_7 .pixel:nth-child(13) .hand_hour,
.digit_7 .pixel:nth-child(14) .hand_hour,
.digit_7 .pixel:nth-child(17) .hand_hour,
.digit_7 .pixel:nth-child(18) .hand_hour,
.digit_7 .pixel:nth-child(21) .hand_hour,
.digit_7 .pixel:nth-child(22) .hand_hour {transform: rotate(-135deg);
}
.digit_7 .pixel:nth-child(9) .hand_minute,
.digit_7 .pixel:nth-child(10) .hand_minute,
.digit_7 .pixel:nth-child(13) .hand_minute,
.digit_7 .pixel:nth-child(14) .hand_minute,
.digit_7 .pixel:nth-child(17) .hand_minute,
.digit_7 .pixel:nth-child(18) .hand_minute,
.digit_7 .pixel:nth-child(21) .hand_minute,
.digit_7 .pixel:nth-child(22) .hand_minute {transform: rotate(-135deg);
}
.digit_8 .pixel:nth-child(1) .hand_hour,
.digit_8 .pixel:nth-child(6) .hand_hour,
.digit_8 .pixel:nth-child(14) .hand_hour {transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(1) .hand_minute,
.digit_8 .pixel:nth-child(6) .hand_minute,
.digit_8 .pixel:nth-child(14) .hand_minute {transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(2) .hand_hour,
.digit_8 .pixel:nth-child(3) .hand_hour,
.digit_8 .pixel:nth-child(22) .hand_hour,
.digit_8 .pixel:nth-child(23) .hand_hour {transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(2) .hand_minute,
.digit_8 .pixel:nth-child(3) .hand_minute,
.digit_8 .pixel:nth-child(22) .hand_minute,
.digit_8 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(4) .hand_hour,
.digit_8 .pixel:nth-child(7) .hand_hour,
.digit_8 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(4) .hand_minute,
.digit_8 .pixel:nth-child(7) .hand_minute,
.digit_8 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(5) .hand_hour,
.digit_8 .pixel:nth-child(8) .hand_hour,
.digit_8 .pixel:nth-child(9) .hand_hour,
.digit_8 .pixel:nth-child(12) .hand_hour,
.digit_8 .pixel:nth-child(13) .hand_hour,
.digit_8 .pixel:nth-child(16) .hand_hour,
.digit_8 .pixel:nth-child(17) .hand_hour,
.digit_8 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_8 .pixel:nth-child(5) .hand_minute,
.digit_8 .pixel:nth-child(8) .hand_minute,
.digit_8 .pixel:nth-child(9) .hand_minute,
.digit_8 .pixel:nth-child(12) .hand_minute,
.digit_8 .pixel:nth-child(13) .hand_minute,
.digit_8 .pixel:nth-child(16) .hand_minute,
.digit_8 .pixel:nth-child(17) .hand_minute,
.digit_8 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(10) .hand_hour,
.digit_8 .pixel:nth-child(18) .hand_hour,
.digit_8 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_8 .pixel:nth-child(10) .hand_minute,
.digit_8 .pixel:nth-child(18) .hand_minute,
.digit_8 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(11) .hand_hour,
.digit_8 .pixel:nth-child(19) .hand_hour,
.digit_8 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(11) .hand_minute,
.digit_8 .pixel:nth-child(19) .hand_minute,
.digit_8 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(1) .hand_hour,
.digit_9 .pixel:nth-child(6) .hand_hour,
.digit_9 .pixel:nth-child(17) .hand_hour {transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(1) .hand_minute,
.digit_9 .pixel:nth-child(6) .hand_minute,
.digit_9 .pixel:nth-child(17) .hand_minute {transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(2) .hand_hour,
.digit_9 .pixel:nth-child(3) .hand_hour,
.digit_9 .pixel:nth-child(14) .hand_hour,
.digit_9 .pixel:nth-child(18) .hand_hour,
.digit_9 .pixel:nth-child(22) .hand_hour,
.digit_9 .pixel:nth-child(23) .hand_hour {transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(2) .hand_minute,
.digit_9 .pixel:nth-child(3) .hand_minute,
.digit_9 .pixel:nth-child(14) .hand_minute,
.digit_9 .pixel:nth-child(18) .hand_minute,
.digit_9 .pixel:nth-child(22) .hand_minute,
.digit_9 .pixel:nth-child(23) .hand_minute {transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(4) .hand_hour,
.digit_9 .pixel:nth-child(7) .hand_hour,
.digit_9 .pixel:nth-child(15) .hand_hour {transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(4) .hand_minute,
.digit_9 .pixel:nth-child(7) .hand_minute,
.digit_9 .pixel:nth-child(15) .hand_minute {transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(5) .hand_hour,
.digit_9 .pixel:nth-child(8) .hand_hour,
.digit_9 .pixel:nth-child(9) .hand_hour,
.digit_9 .pixel:nth-child(12) .hand_hour,
.digit_9 .pixel:nth-child(16) .hand_hour,
.digit_9 .pixel:nth-child(20) .hand_hour {transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(5) .hand_minute,
.digit_9 .pixel:nth-child(8) .hand_minute,
.digit_9 .pixel:nth-child(9) .hand_minute,
.digit_9 .pixel:nth-child(12) .hand_minute,
.digit_9 .pixel:nth-child(16) .hand_minute,
.digit_9 .pixel:nth-child(20) .hand_minute {transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(10) .hand_hour,
.digit_9 .pixel:nth-child(13) .hand_hour,
.digit_9 .pixel:nth-child(21) .hand_hour {transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(10) .hand_minute,
.digit_9 .pixel:nth-child(13) .hand_minute,
.digit_9 .pixel:nth-child(21) .hand_minute {transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(11) .hand_hour,
.digit_9 .pixel:nth-child(19) .hand_hour,
.digit_9 .pixel:nth-child(24) .hand_hour {transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(11) .hand_minute,
.digit_9 .pixel:nth-child(19) .hand_minute,
.digit_9 .pixel:nth-child(24) .hand_minute {transform: rotate(0deg);
}

card.css 代码 

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  /* --card-width: calc(var(--card-height) / 1.5); */
  --card-width: auto;
}


body {
  min-height: 100vh;
  /* background: #212534; */
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}


.card {backdrop-filter: blur(50px);
 /* background: #191c29;
  width: var(--card-width);
  height: var(--card-height); */
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

.card:hover {color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}


.card::before {
  content: "";
/*  width: 104%;
  height: 102%; */
  border-radius: 8px;
  background-image: linear-gradient(var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    /* position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite; */
}

.card::after {
  position: absolute;
  content: "";
  /* top: calc(var(--card-height) / 6); */
  top: calc(var(--card-height) / 30);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {--rotate: 0deg;}
  100% {--rotate: 360deg;}
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}

main.js 代码 

(function (window) {
	'use strict';

	var Digit = (function () {var Digit = function (container) {this.container = container;};
		Digit.prototype.setDigit = function (digit) {
			digit = digit + '';
			if (this.digit === digit) {return;}
			this.digit = digit;
			this.container.className = 'digit digit_' + digit;
		};
		return Digit;
	})();

	var template = (function () {function clockTemplate () {
			return ['<div class="pixel">',
				'<div class="hand hand_hour"></div>',
				'<div class="hand hand_minute"></div>',
				'</div>'
			].join('');
		}
		function digitTemplate () {var result = ['<div class="digit">'];
			for (var i = 0; i < 24; i++) {result.push(clockTemplate());
			}
			result.push('</div>');
			return result.join('');
		}
		function numberTemplate () {
			return [
				'<div class="number">',
				digitTemplate(),
				digitTemplate(),
				'</div>'
			].join('');
		}
		return function () {
			return [numberTemplate(),
				numberTemplate(),
				numberTemplate()].join('');
		};
	})();

	var start = (function () {
		var _digits, prevSeconds;
		function getDigits (num) {return ((num > 9 ? '':'0') + num).split('');
		}
		function update (date, seconds) {var digitsList = [];
			digitsList = digitsList.concat(getDigits(date.getHours()));
			digitsList = digitsList.concat(getDigits(date.getMinutes()));
			digitsList = digitsList.concat(getDigits(seconds));
			digitsList.forEach(function (digit, index) {_digits[index].setDigit(digit);
			});
		}
		function tick () {var now = new Date();
			var seconds = now.getSeconds();
			if (seconds !== prevSeconds) {
				prevSeconds = seconds;
				update(now, seconds);
			}
			setTimeout(tick, 100);
		}
		return function (digits) {
			_digits = digits;
			tick();};
	})();

	// entry point
	function init () {var cont = document.querySelector('#clock');
		cont.innerHTML = template();

		var digits = Array.prototype.slice.call(cont.querySelectorAll('.digit'))
			.map(function (cont) {return new Digit(cont);
			});

		// A fancy timeout
		setTimeout(start.bind(null, digits), 1000);
	}

	window.addEventListener('load', init);
})(window);

源码下载

立即下载！

微信扫描下方的二维码阅读本文

Html 在线时钟 Demo

发表至：代码类
2022-10-27

# ----《》
 
Alan明宇
版权声明：本站原创文章，由 Alan明宇 2022-10-27发表，共计27071字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
世界，您好！
代码整洁之道Ⅰ最佳实践小结
Docker 常用命令
ios免费看全网动漫