如何在没有javascript的情况下创建此仪表

Question

我试图创造这个仪表，没有运气。到目前为止，我发现的唯一解决方案是js。我的目标是在没有任何javascript的情况下实现这一点，只需使用css3和html。

有什么想法吗？谢谢！

Answer 1

这使用CSS3关键帧already been answered。

Here's the example

HTML：

<div id="logo"> <span class="speedometer"></span>
    <span class="needle"></span>

</div>

CSS：

#logo {
    display: inline-block;
    position: relative;
}
#logo .speedometer {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 20px solid #000;
    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:rotate(0deg);
    transform-origin:bottom;
}
@-webkit-keyframes move {
    0% {
        transform:rotate(-90deg);
    }
    50% {
        transform:rotate(90deg);
    }
    100% {
        transform:rotate(-90deg);
    }
}