时钟
效果图：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="clock">
<div class="center-nut"></div>
<div class="center-nut2"></div>
<div class="indicators">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<div>
<p>11</p>
</div>
<div>
<p>12</p>
</div>
</div>
<div class="sec-hand">
<div class="sec"></div>
</div>
<div class="min-hand">
<div class="min"></div>
</div>
<div class="hour-hand">
<div class="hour"></div>
</div>
</div>
<script type="text/javascript">
const sec = document.querySelector('.sec')
const min = document.querySelector('.min')
const hour = document.querySelector('.hour')
setInterval(() => {
let time = new Date();
let secs = time.getSeconds()*6;
let mins = time.getMinutes()*6;
let hours = time.getHours()*30 ;
sec.style.transform = `rotateZ(${
secs}deg)`;
min.style.transform = `rotateZ(${
mins}deg)`;
hour.style.transform = `rotateZ(${
hours+(mins/12)}deg)`;
}, 1000)
</script>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #dde1e7;
text-align: center;
}
.clock {
display: flex;
background-color: #EDEDEDe7;
align-items: center;
justify-content: center;
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
box-shadow: -3px -3px 7px #FFFFFF73,
3px 3px 5px rgba(94, 104, 121, 0.288);
}
.clock::before {
position: absolute;
content: '';
height: 220px;
width: 220px;
background-color: #DDE1E7;
border-radius: 50%;
box-shadow: inset -3px -3px 7px #FFFFFF73,
inset 3px 3px 5px rgba(94, 104, 121, 0.288);
}
.clock::after {
position: absolute;
content: '';
height: 120px;
width: 120px;
background-color: #DDE1E7;
border-radius: 50%;
box-shadow: -1px -1px 5px #FFFFFF73,
1px 1px 3px rgba(94, 104, 121, 0.288);
}
.clock .center-nut {
position: absolute;
height: 15px;
width: 15px;
background-color: #404040;
z-index: 2;
border-radius: 50%;
}
.clock .center-nut2 {
position: absolute;
height: 9px;
width: 9px;
background-color: #3498db;
z-index: 15;
border-radius: 50%;
}
.indicators div {
position: absolute;
width: 2px;
height: 5px;
background: #404040;
transform: rotate(calc(30deg * var(--n))) translateY(-100px);
}
.indicators div p{
display: block;
position: absolute;
left: -5px;
top: 5px;
}
.indicators div:nth-child(1) {
--n: 1;
}
.indicators div:nth-child(2) {
--n: 2;
}
.indicators div:nth-child(3) {
--n: 3;
background-color: #3498DB;
}
.indicators div:nth-child(4) {
--n: 4;
}
.indicators div:nth-child(5) {
--n: 5;
}
.indicators div:nth-child(6) {
--n: 6;
background-color: #3498DB;
}
.indicators div:nth-child(7) {
--n: 7;
}
.indicators div:nth-child(8) {
--n: 8;
}
.indicators div:nth-child(9) {
--n: 9;
background-color: #3498DB;
}
.indicators div:nth-child(10) {
--n: 10;
}
.indicators div:nth-child(11) {
--n: 11;
}
.indicators div:nth-child(12) {
--n: 12;
background-color: #3498DB;
}
.sec-hand,
.min-hand,
.hour-hand {
position: absolute;
}
.min,
.min-hand {
height: 140px;
width: 140px;
z-index: 5;
}
.sec,
.sec-hand {
height: 180px;
width: 180px;
z-index: 6;
}
.hour,
.hour-hand {
height: 110px;
width: 110px;
z-index: 4;
}
.sec,
.min,
.hour {
display: flex;
justify-content: center;
position: absolute;
}
.sec::before {
position: absolute;
content: "";
height: 110px;
width: 3px;
background-color: #3498DB;
}
.sec::after{
position: absolute;
content: "";
height: 35px;
width: 7px;
background-color: #3498DB;
top: 105px;
border-radius: 5px;
}
.min::before {
position: absolute;
content: "";
width: 1px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 60px solid #e95949;
top: -15px;
}
.min::after{
position: absolute;
content: "";
width: 3px;
border-left: 2x solid transparent;
border-right: 2px solid transparent;
border-top: 30px solid #e95949;
top: 40px;
}
.hour::before {
position: absolute;
content: "";
width: 1px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 35px solid #303030;
}
.hour::after{
position: absolute;
content: "";
width: 3px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 25px solid #303030;
top: 35px;
}
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 35px solid #303030;
}
.hour::after{
position: absolute;
content: “”;
width: 3px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 25px solid #303030;
top: 35px;
}