仅使用CSS修改车速表针

Question

是否可以使用内联变换calc（％Metadata％）修改针旋转值我不知道是否可以使用公式？

可能的元数据值可以是0到100，0应等于-90deg100应该等于90deg>

<div id="logo"> <span class="speedometer"></span>
    <span class="needle" style="transform:rotate(%metadata%);"></span>
</div>

#logo {
    display: inline-block;
    position: relative;
}
#logo .speedometer {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 20px solid tomato;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    -webkit-transform: rotate(45deg);
    display: inline-block;
}
#logo .needle {
    width: 5px;
    height: 50px;
    background: #999999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    display: inline-block;
    left: 57px;
    position: absolute;
    top: 10px;
    -webkit-animation:move 5s infinite;
    
    transform-origin:bottom;
}
<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="transform:rotate(-90deg);"></span>
</div>

是否可以使用内联变换calc（％Metadata％）修改针旋转值，我不知道是否可以使用公式？可能的元数据值可以是0到100，0 ...

Answer 1

我认为您正在尝试这样做