css做一个仪表盘

最新推荐文章于 2025-03-28 23:06:43 发布

Baymax627

最新推荐文章于 2025-03-28 23:06:43 发布

阅读量4.1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/jl381169437/article/details/78087347

版权

前端专栏收录该内容

31 篇文章

订阅专栏

本文档将指导你如何利用CSS技术来设计一个仪表盘，包括指针和刻度盘的样式实现，通过图片dial-plate.png和pointer.png来增强视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dial-plate.png: 这里写图片描述
pointer.png

// react写法!

import dialPlate from '../../../../../img/dial-plate.png';
import pointer from '../../../../../img/pointer.png';

<div styleName="dialPlateContaienr">
    <img src={dialPlate} role="presentation" />
    <img
        role="presentation"
        style={{
            width: 100,
            transform:`rotate(${shortTermMomInfo.momentumValue}deg)`,
            //transform设置角度，即变量shortTermMomInfo.momentumValue
        }}
       styleName="pointerPng"
       src={pointer}
     />
 </div>

css
.dialPlateContaienr {
   width: 100%;
   .pointerPng {
     position: relative;
     bottom: 50px;
     left: 65px;
     transform-origin: 90% 60%; // 设置旋转的原点
   }
 }