一个基于vue的钟表demo

最新推荐文章于 2024-03-17 22:04:44 发布

VIP文章 balanp3008

最新推荐文章于 2024-03-17 22:04:44 发布

阅读量846

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/JHCan333/p/11542607.html

版权

前两天写了一个基于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;
            back

最低0.47元/天解锁文章

balanp3008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个基于vue的钟表demo

前两天写了一个基于vue的小钟表，给大家分享一下。其中时针和分针使用的是图片，结合transform制作；表盘刻度是通过transform和transformOrigin配合画的；外面的弧形框框，啊哈哈，也是用的图片。具体的看里面的注释就好了，感觉写的还算清楚，啊哈哈~能帮到你的话，点个赞呗？预览图：效果的话，可以看这里https://jhcan333.github.io/c...
复制链接

扫一扫