仪表盘 加减速

最新推荐文章于 2021-07-13 08:12:35 发布
最新推荐文章于 2021-07-13 08:12:35 发布
阅读量137 收藏
点赞数
分类专栏： 知识 文章标签： 效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinlulucsdn/article/details/106239852
版权

效果图

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #232323;
            font-family: Roboto;
        }

        .progress {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateY(180deg);
        }

        .progress:before {
            content: "";
            position: absolute;
            width: 185px;
            height: 185px;
            background: #232323;
            border-radius: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
        }

        .progress:after {
            content: "";
            position: absolute;
            width: 8px;
            height: 100px;
            background: linear-gradient(180deg, #d63031, #232323);
            border-radius: 10px;
            box-shadow: 0 -19px 9px -3px #d63031;
            top: 0;
            right: 50%;
            margin-right: -4px;
            z-index: 999;
            transform: rotate(90deg);
            transform-origin: bottom;
            animation-name: meter;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0, 0.1, 0.9, 0.81);
            animation-play-state: paused;
            animation-direction: reverse;
            animation-delay: 5s;
        }

        .progress .precent {
            position: absolute;
            top: 29px;
            left: 50%;
            z-index: 99;
            transform: translate(-50%, 0) rotateY(180deg);
            font-size: 19px;
            color: white;
            width: 47px;
            text-align: center;
            line-height: 1.5;
        }

        .progress .precent:after {
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            background: #323232;
            border-radius: 100%;
            top: 85px;
            right: -35px;
        }

        .progress .precent:before {
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            background: #323232;
            border-radius: 100%;
            top: 85px;
            left: -35px;
        }

        .progress .circle {
            width: 200px;
            height: 200px;
            background: white;
            background: conic-gradient(from 91deg,
                    #d63031 0%,
                    #ffffff 20%,
                    transparent 100%);
            -webkit-clip-path: polygon(0% 100%,
                    0% 0%,
                    100% 0%,
                    100% 50%,
                    50% 50%,
                    100% 50%,
                    100% 100%);
            clip-path: polygon(0% 100%,
                    0% 0%,
                    100% 0%,
                    100% 50%,
                    50% 50%,
                    100% 50%,
                    100% 100%);
            animation-name: loading;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0, 0.1, 0.9, 0.81);
            animation-play-state: paused;
            animation-direction: reverse;
            animation-delay: 5s;
            border-radius: 100%;
        }

        @keyframes loading {
            0% {
                -webkit-clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 50%,
                        100% 100%);
                clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 50%,
                        100% 100%);
            }

            12.5% {
                -webkit-clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 100%,
                        100% 100%);
                clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 100%,
                        100% 100%);
            }

            25% {
                -webkit-clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        50% 100%,
                        50% 100%);
                clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        50% 100%,
                        50% 100%);
            }

            37.5% {
                -webkit-clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        0% 100%,
                        0% 100%);
                clip-path: polygon(0% 100%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        0% 100%,
                        0% 100%);
            }

            50% {
                -webkit-clip-path: polygon(0% 50%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        0% 50%,
                        0% 50%);
                clip-path: polygon(0% 50%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        0% 50%,
                        0% 50%);
            }

            62.5% {
                -webkit-clip-path: polygon(0% 0%,
                        0% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        0% 0%,
                        0% 0%);
                clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 50%, 50% 50%, 0% 0%, 0% 0%);
            }

            75% {
                -webkit-clip-path: polygon(50% 0%,
                        50% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        50% 0%,
                        50% 0%);
                clip-path: polygon(50% 0%,
                        50% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        50% 0%,
                        50% 0%);
            }

            87.5% {
                -webkit-clip-path: polygon(100% 0%,
                        100% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 0%,
                        100% 0%);
                clip-path: polygon(100% 0%,
                        100% 0%,
                        100% 0%,
                        100% 50%,
                        50% 50%,
                        100% 0%,
                        100% 0%);
            }

            100% {
                -webkit-clip-path: polygon(100% 50%,
                        100% 50%,
                        100% 50%,
                        100% 50%,
                        50% 50%,
                        100% 50%,
                        100% 50%);
                clip-path: polygon(100% 50%,
                        100% 50%,
                        100% 50%,
                        100% 50%,
                        50% 50%,
                        100% 50%,
                        100% 50%);
            }
        }

        @keyframes meter {
            0% {
                transform: rotate(90deg);
            }

            25% {
                transform: rotate(179deg);
            }

            50% {
                transform: rotate(269deg);
            }

            75% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(450deg);
            }
        }

        .progress .range {
            margin-top: 20px;
            transform: rotate(180deg);
        }

        .progress input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }

        .progress input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        .progress input[type="range"]:focus {
            outline: none;
        }

        .progress input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 100%;
            background: white;
            cursor: pointer;
            margin-top: -6px;
            z-index: 9;
            position: relative;
        }

        .progress input[type="range"]::-moz-range-thumb {
            height: 16px;
            width: 16px;
            border-radius: 100%;
            background: white;
            cursor: pointer;
            border: 0;
            z-index: 9;
            position: relative;
        }

        .progress input[type="range"]::-webkit-slider-runnable-track {
            width: 100%;
            height: 5px;
            cursor: pointer;
            background: white;
            border-radius: 20px;
        }

        .progress input[type="range"]::-moz-range-track {
            width: 100%;
            height: 5px;
            cursor: pointer;
            background: white;
            border-radius: 20px;
        }


        .kongzhi {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .kongzhi div {
            margin: 0 10px;
            border-radius: 20px;
            width: 50px;
            border: 1px solid #f0f0f0;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="progress">
        <div class="precent">0 km/h</div>
        <div class="circle"></div>
        <div class="range">
            <input type="range" min="0" max="1000" value="0" id="range">
            <div class="filled"></div>
        </div>
    </div>
    <div class="kongzhi">
        <div class="shache">刹车</div>
        <div class="jiasu">加速</div>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    <script>
        $(function () {
            var startTime = null
            var endTime = null
            renderData()
            $(document).on("input", "#range", function () {
                clearInterval(startTime)
                clearInterval(endTime)
                renderData()
            });

            $('.shache').on('touchstart', function (event) {
                startTime = setInterval(() => {
                    let val = $("#range").val()*1
                    val -= 1
                    $("#range").val(val)
                    renderData()
                }, 5)
            });

            $('.shache').on('touchend', function (event) {
                clearInterval(startTime)
            })

            $('.jiasu').on('touchstart', function (event) {
                endTime = setInterval(() => {
                    let val = $("#range").val()*1
                    val += 1
                    $("#range").val(val)
                    renderData()
                }, 5)
            });

            $('.jiasu').on('touchend', function (event) {
                clearInterval(endTime)
            })

            function renderData() {
                var ele = $("#range")[0]
                var percent = ((ele.value - ele.min) / (ele.max - ele.min)) * 5;
                var percentshow = Math.round(
                    ((ele.value - ele.min) / (ele.max - ele.min)) * 100
                )*10;
                // if (ele.value <= ele.min) {
                //     clearInterval(startTime)
                // }
                // if (ele.value >= ele.max) {
                //     clearInterval(endTime)
                // }

                $("#meterstyle").remove();
                if (percent < 5) {
                    $(".progress .circle").attr("style", "animation-delay:-" + percent + "s");
                    $("body").append(
                        "<div id='meterstyle'><style>.progress:after{animation-delay:-" +
                        percent +
                        "s;}</style></div>"
                    );
                } else {
                    $(".progress .circle").attr("style", "animation-delay:5s");
                    $("body").append(
                        "<div id='meterstyle'><style>.progress:after{animation-delay:5s;}</style></div>"
                    );
                }
                $(".progress .precent").text(percentshow + " km/h");
            }
        });

    </script>
</body>

</html>

 

秦璐璐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c语言作业汽车加速,C语言求车速
weixin_35687240的博客
05-16 2217
问题描述一辆以固定速度行驶的汽车，司机在上午10点看到里程表上的读数是一个对称数(即这个数从左向右读和从右向左读是完全一样的)，为95859。两小时后里程表上出现了一个新的对称数，该数仍为五位数。问该车的速度是多少？新的对称数是多少？问题分析根据题意，司机在上午10点看到里程表上的读数是一个对称数95859，两小时后里程表上出现的新的对称数必然大于95859。因此，假设所求对称数为 i，并设其初值...
android自定义速度仪表盘,自定义View实战：汽车速度仪表盘
weixin_31759829的博客
05-25 1144
是不是很酷炫?看起来觉得有点复杂？ 其实不难 ， 实现起来很容易。绘制逻辑如下：1. 绘制一个实心的圆做仪表盘背景：mPaint.setStyle(Paint.Style.FILL);mPaint.setColor(0xFF343434);canvas.drawCircle(pointX, pointY, raduis, mPaint);2. 绘制外面的两个圆环 和 里面的 两个圆环：//外圈...
小车加减速c程序
08-28
很好的小车加减速控制程序，已运行过，没有问题
html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
weixin_33168819的博客
07-13 980
网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；CSS3新增的制作动画属性也考虑到这个问题，只要作了相应的设置，鼠标移到上面，动画也会停止，移开鼠标，动画继续运动；这主要通过animation-play-state属性来控制。animation-play-state只有两个取值，一个控制动画运动，另一个控制动画停止；具体怎么设置看下面的语法规则，至于如何应用，看文章最后的转圈彩色文字...
Rainmeter 一部分 语法 中文教程
weixin_34068198的博客
05-16 1008
;Meter基本元素示例：;如果是[MeterStyle]表示Meter的公共Style，类似CSS的意义！！！;颜色可以使用网页的颜色定义方式，如半透明黄色：255.255.0.128=FFFF0080[MeterTEST]X=0Y=0W=100H=20;设为1为隐藏，0（默认值）Hidden=0;如只需要绘制静态图形或静态文字的话可以不写MeasureName=MeasureStyleFont...
Rainmeter雨滴天气-(永不过时版通过获取网页数据实现)
热门推荐
talentmu3的博客
02-25 1万+
Rainmeter雨滴天气-（永不过时版通过获取网页数据实现）前提背景介绍：插件安装使用方法：插件下载地址： 前提背景介绍： 雨滴工具大家应该都很熟悉，但是天气老是要调用第三方接口，这是受限于别人了，很不舒服！于是自己写了个网页提取版，希望大佬们喜欢！ 利用雨滴自带的插件WebParser，可以获取网页网数据，并正则提取我们想要数据即可，包括温度，天气状况甚至图标都行。 这样就可以只要...
python做仪表盘_手动实现一个速度仪表盘
weixin_39765057的博客
11-23 467
前言最近正在学习数据可视化, 这里记录一下一些心得与成果, 采用的技术是 (svg + react + d3)。 这种实现可视化方式本人个人感觉超级不错，如果你是有一定的基础的同学，强烈推荐一下。效果整体效果如下：这个是普通的速度仪表盘，有没有开发太多的动态交互，唯一的交互是点击图片最上面的加速与减速就能够调整速度了。开发思路搭建开发环境使用create-react-app创建一个新的项目，添加依...
仪表盘实例
05-16
在Android开发中，创建一个仪表盘实例涉及到许多关键知识点，主要涵盖了图形绘制、动画控制以及UI组件的使用。本文将深入探讨如何利用Android SDK来实现一个动态的仪表盘，包括如何画图、如何控制指针转动，以及可能...
安卓仪表盘效果相关-安卓转盘抽奖源码转动的是转盘不是指针。使用直接换转盘背景图和指针图片传入奖品对应的模块值就可以了.rar
07-29
在安卓应用开发中，创建吸引用户的交互界面是至关重要的，其中一种常见的互动元素就是仪表盘效果，例如转盘抽奖。本资源提供了一个实现此类效果的安卓源码，名为"安卓转盘抽奖源码：转动的是转盘不是指针"。这个源码...
html5 echarts汽车加速仪表盘动画特效
06-12
开发者可以通过ECharts的自定义系列（series-type: 'custom'）功能，结合JavaScript事件处理和动画控制，实现仪表盘指针的旋转动画，模拟汽车加速或减速时仪表读数的变化。 具体实现步骤可能包括以下几点： 1. 创建...
汽车仪表盘故障和功能指示灯完全解读PPT课件.pptx
10-13
汽车仪表盘故障和功能指示灯完全解读 汽车仪表盘上的指示灯是一项非常重要的安全特征，每个指示灯都有其特定的含义和作用。了解这些指示灯的含义和作用对车主来说是非常重要的。本文将为大家介绍汽车仪表盘上常见的...
基于MC9S12HY32的电动汽车仪表盘设计.pdf
09-05
【电动汽车仪表盘设计】 本文主要讨论了一种基于MC9S12HY32微处理器的电动汽车仪表盘设计，该设计集成了车速检测、步进电机控制、LCD显示和故障报警等多种功能。MC9S12HY32是飞思卡尔（现NXP）S12系列的16位微控制...
小车加速减速的c语言,c2控制速度技巧
weixin_26717737的博客
05-19 907
1车辆进入山区道路后，要特别注意“连续转弯”标志，并主动避让车辆及行人，适时减速和提前鸣喇叭。查看本题分析2交通警察对未放置保险标志上道路行驶的车辆可依法扣留行驶证。查看本题分析3初次申领的机动车驾驶证的有效期为4年。查看本题分析4年龄在70周岁以上，在一个记分周期结束后一年内未提交身体条件证明的，其机动车驾驶证将会被车辆管理所注销。查看本题分析5因避让特种车辆而发生违法行为，被电子警察拍到时，可...
synchronized-4月5日.md
07-06
synchronized-4月5日.md
场景化落地应用推进制造企业数字化转型两套文档.pptx
07-05
场景化落地应用推进制造企业数字化转型两套文档.pptx
1111111111111111111111111111111
07-06
1111111111111111111111111111111
大型企业数字化转型管控平台解决方案两套材料.pptx
07-05
大型企业数字化转型管控平台解决方案两套材料.pptx
maven下载、安装、配置与使用教程&相关项目
最新发布
07-06
【maven】下载、安装、配置与使用教程&相关项目
梯形加减速matlab
07-28
梯形加减速是一种机器人关节空间规划方法，用于控制机器人在运动过程中的速度和加速度。它是通过与抛物线拟合的线性函数来实现的。在Matlab中，可以使用以下步骤来实现梯形加减速： 1. 确定梯形速度曲线的参数，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值