前两天写了一个基于vue的小钟表,给大家分享一下。喜欢的话还请点赞!
其中时针和分针使用的是图片,结合transform制作;表盘刻度是通过transform和transformOrigin配合画的;外面的弧形框框,啊哈哈,也是用的图片。具体的看里面的注释就好了,感觉写的还算清楚,啊哈哈~
预览图
效果的话,可以看这里
https://jhcan333.github.io/can-Share/demos-tips/clockDemo.html
github 地址在这里
https://github.com/JHCan333/can-Share/blob/master/demos-tips/clockDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个基于vue的时钟小demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.jhc-hour-needle {
z-index: 5;
width: 6%;
height: 25%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/hourPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-min-needle {
z-index: 2;
width: 6%;
height: 30%;
position: absolute;
left: 49%;
bottom: 47%;
transform-origin: center bottom;
background: url(https://jhcan333.github.io/can-Share//image/clock/minPoint.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-area {
width: 400px;
height: 400px;
position: relative;
background: #050842;
}
.jhc-clock-back {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: url(https://jhcan333.github.io/can-Share//image/clock/clockBack.png) no-repeat;
background-size: 100% 100%;
}
.jhc-clock-title {
color: #fff;