CSS 实现汽车仪表盘（一个项目学会 N 个键技术点）

前言

好久不见！话说已经很久没有写过博客了，不过学习的脚步（焦虑）还是没有停止。

最近刷视频看到有人卖 QT 课实现汽车仪表盘，我灵机一动，就有了这个项目。

效果展示

请看 VCR

演示地址

源码地址

项目亮点

• 纯 CSS 技术实现仪表盘样式（零图片）
• 声音控制 Web Audio API
• 转速、迈速、档位联动

亮点无关（用到的其他技术，有学习需求的可以顺便学习一哈）

• React 18 实践
• 企业项目级规范（反正就是仓库配置足够标准 🤪）
• 移动端适配

CSS 技术实现仪表盘样式

说实话，我之前搜了搜汽车仪表盘的相关实现，我看有一部分人都是用 d3.js 这个库实现的，但我觉得不必了。CSS 完全可以满足。来看一下我的实现思路：

1. 先画一个圆
   
2. 实现刻度线
   
3. 实现表盘数字
   
4. 实现表针
   
5. 再叠加一个圆圈，实现档位
   

大家可以去仓库看一下实现代码，或者联系我要代码。

接下来，我对几个关键的点来展开说一下吧。相信聪明的你看完之后一下子就可以写出来！

刻度实现

首先，每一根刻度线，都是一个 li 元素加 CSS 样式

其次，每五个 li 元素中第一个进行加粗（多类名就可以实现）

最后也是最重要的，围绕中心以半径进行旋转，且指向圆心

我用一个例子给大家讲解一下第三点。（一、二点就不说啦哈，有问题可以私信我。）

这个效果中，六个 ↑ 都以半径 R 做圆，且朝向圆心。

这里的 CSS 代码涉及到了高中知识，我先来科普一下

最初所有的刻度点都在圆心，我们要把每一个刻度点移动到指定位置上，因此我们只需要计算出它应该偏移的 x 和 y。

解：设 A 点与 Y 轴夹角为 θ

因为：已知圆半径为 R

因此：X = R * sin(θ)

因此：Y = R * cos(θ)

所以呢，我们利用 CSS 的 transform 属性将它平移过去，再旋转一下就可以了

刻度值实现

和刻度实现是一样的，换一下 li 标签内容和样式，调整一下半径大小就可以

指针实现

利用 CSS 的 transform 属性，根据不同转速，改变角度值就好了

小结

今天主要介绍了 CSS 实现汽车仪表盘的样式效果，相信看完的你一定收获满满~

一些样式细节，可以到 git 仓库 中去查看

后续有时间我可能会继续介绍

• 如何让表针动起来
• 如何实现转速、迈速、档位联动
• 如何实现踩油门的声浪
• 如何做好移动端兼容
• 如何使表针转动更丝滑
• 如何在解决 React 中的“坑”
• 如何自动发布 github page 页

如有哪些地方解释的不清楚，还请大家指出，我会积极回复~ 谢谢！