一个基于Vue的仪表盘demo

最新推荐文章于 2024-07-03 09:19:13 发布

JHCan333

最新推荐文章于 2024-07-03 09:19:13 发布

阅读量1.4k

点赞数 2

分类专栏：前端知识文章标签： demo 仪表盘

本文链接：https://blog.csdn.net/qq_35436516/article/details/101114986

版权

最近写了一个基于vue的仪表盘，其中主要是和 transform 相关的 css 用的比较多。给大家分享一下，喜欢的话点个赞呗？嘿嘿

截图如下：

实际效果查看地址：https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.html

github：https://github.com/JHCan333/can-Share/blob/master/demos-tips/gaugeDemo.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>
        /**仪表盘的css开始**/
        /* 仪表盘区域 */
        .jhc-gauge-area {
            width: 500px;
            height: 500px;
            position: relative;
            background: #050842;
        }

        /* 仪表盘中圆形的环 */
        .jhc-gauge-circle {
            width: 88%;
            height: 88%;
            border: 2px solid #509fef;
            border-radius: 50%;
            position: absolute;
            top: 5%;
            left: 6%;
        }

        /* 仪表盘的圆心 */
        .jhc-gauge-center {
            width: 8%;
            height: 8%;
            border-radius: 50%;
            position: absolute;
            background-color: #509fef;
            z-index: 20;
            left: 46%;
            top: 46%;
            box-shadow: 0px 0px 10px 1px #000;
        }

        /* 仪表盘的背景图片 */
        .jhc-gauge-back {
            width: 66%;
            height: 66%;
            border-radius: 50%;
            position: absolute;
            top: 4%;
            left: -33%;
            background: url(https://jhcan333.github.io/can-Share/image/clock/gaugeBack.png) no-repeat;
            background-size: 95% 95%;
            background-position: center center;
        }

        /* 仪表盘的指针 */
        .jhc-gauge-needle {
            z-index: 5;
            width: 8%;
            height: 26%;
            position: absolute;
            left: 46%;
            bottom: 50%;
            transition:all 0.5s ease-in-out;
            transform-origin: center bottom;
            background: url(https://jhcan333.github.io/can-Share/image/clock/hourPoint.png) no-repeat;
            background-size: 100% 100%;
        }

        /* 仪表盘的标题 */
        .jhc-gauge-title {
            color: #fff;
            position: absol

最低0.47元/天解锁文章

JHCan333

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个基于Vue的仪表盘demo

最近写了一个基于vue的仪表盘，其中主要是和 transform 相关的 css 用的比较多。给大家分享一下，喜欢的话点个赞呗？嘿嘿截图如下：实际效果查看地址：https://jhcan333.github.io/can-Share/demos-tips/gaugeDemo.htmlgithub：https://github.com/JHCan333/can-Share/blob/mas...
复制链接

扫一扫

专栏目录