css做一个仪表盘

来源:互联网 发布:java技术总监简历 编辑:程序博客网 时间:2024/05/22 03:24

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%; // 设置旋转的原点   } }
原创粉丝点击