Wie man dieses Messgerät ohne Javascript erstellt [geschlossen] - css3

Ich versuche, dieses Maß zu erzeugen, ohne Glück. Die einzige Lösung, die ich bisher gefunden habe, betrifft js. Mein Ziel ist es, dies ohne Javascript zu erreichen, nur mit CSS3 und HTML.

Irgendwelche Ideen? Vielen Dank!

Antworten:

Das hat wurde bereits beantwortet Verwenden von CSS3-Keyframes.

Hier ist das Beispiel

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);
}
}