一、思路概括
1、在互联网上搜索一张表盘图片,将表盘在页面剧剧中
2、分别制作 时针、 分针、 秒针
3、将 时针、 分针、 秒针 固定在表盘中心点上
4、给 时针、 分针、 秒针加入动画
二、时钟美化
1、给时钟加入一个背景图片
2、加入一些喜欢的文字
三、代码展示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟</title>
<style>
* {
margin: 0;
padding: 0
}
body {
background: url("./images/hh.webp") no-repeat center / 100%;
}
#clock {
position: relative;
width: 600px;
height: 600px;
background: url("./images/bbbbb.webp") no-repeat center /105% 100%;
border-radius: 50%;
margin: auto;
margin-top: 30px;
}
#clock p {
position: absolute;
}
#clock .h {
width: 14px;
height: 100px;
background-color: black;
left: 288px;
top: 200px;
transform-origin: center bottom;
animation: clock 43200s linear infinite;
}
#clock .m {
width: 10px;
height: 140px;
background-color: #3f8f9a;
left: 290px;
top: 160px;
transform-origin: center bottom;
animation: clock 3600s linear infinite;
}
#clock .s {
width: 6px;
height: 180px;
background-color: #da8896;
left: 292px;
top: 120px;
transform-origin: center bottom;
animation: clock 60s steps(60) infinite;
}
@keyframes clock {
to {
transform: rotate(360deg);
}
}
img {
position: absolute;
width: 44px;
height: 44px;
left: 277px;
top: 277px;
}
@font-face {
font-family: mzd;
src: url("../day5/mzd.ttf");
}
.mao {
font-size: 30px;
font-family: mzd;
}
.hy {
position: absolute;
left: 150px;
top: 160px;
font-size: 60px;
}
.rw {
position: absolute;
right: 150px;
top: 160px;
font-size: 60px;
}
</style>
</head>
<body>
<div id="clock">
<p class="h"></p>
<p class="m"></p>
<p class="s"></p>
<img src="./images/20220709084839_465x262_386x256_327x256_265x207.png" alt="">
</div>
<div class="wz">
<div class="mao hy">花<br>有<br>重<br>开<br>日</div>
<div class="mao rw">人<br>无<br>在<br>少<br>年</div>
</div>
</body>
</html>
四、成品展示