优雅漂亮的圆形时钟
2022-05-12 本文已影响0人
ohityes
这是一款使用 CSS 制作的优雅漂亮的圆形时钟，时钟清爽简洁，看起来非常舒服。
优雅漂亮的圆形时钟
查看效果：优雅漂亮的圆形时钟演示
制作过程
1、HTML
HTML 代码比较简单，应为只需要一个表盘和三根针。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>优雅漂亮的圆形时钟演示_dowebok</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
</div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script src="script-ym.js"></script>
</body>
</html>
2、CSS
CSS 代码稍微多一点，主要是美化表盘。
html {
background: #d8dcd6;
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
position: relative;
padding: 2rem;
border: 18px solid #d3d7d0;
box-shadow: 5px -5px 5px 0px rgba(242, 243, 242, 0.5), -5px 8px 8px 0px rgba(177, 185, 173, 0.5),
inset -3.5px 5.5px 6px 0px rgba(177, 185, 173, 0.5),
inset 3px -3px 1px 0px rgba(190, 197, 186, 0.15);
border-radius: 50%;
margin: 50px auto;
}
.outer-clock-face {
position: relative;
background: #d8dcd6;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 100%;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.outer-clock-face::after,
.outer-clock-face::before,
.outer-clock-face .marking {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #84c2b3;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #9bc5bb;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg);
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #d8dcd6;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #e38c63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 6px;
background: #e38c63;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 3px;
z-index: 10;
width: 45%;
}
.hand.second-hand {
background: #767b78;
width: 45%;
height: 2px;
z-index: 1;
}
3、Javascript
JS 代码也比较简单，只需获取当前的时间并设置一个定时器。
const secondHand = document.querySelector('.second-hand')
const minsHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')
function setDate() {
const now = new Date()
const seconds = now.getSeconds()
const secondsDegrees = (seconds / 60) * 360 + 90
secondHand.style.transform = `rotate(${secondsDegrees}deg)`
const mins = now.getMinutes()
const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90
minsHand.style.transform = `rotate(${minsDegrees}deg)`
const hour = now.getHours()
const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90
hourHand.style.transform = `rotate(${hourDegrees}deg)`
}
setInterval(setDate, 1000)
setDate()
到这里就制作完了，如需下载代码，请前往：优雅漂亮的圆形时钟
