动画车速表针与纯CSS [英] animate speedometer needle with pure css
本文介绍了动画车速表针与纯CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里尝试过最好的 Jsfiddle 。现在我想慢慢地从左到右为中心针点动画。我听说过css关键帧并尝试了。但是,它左右。我没有得到预期的结果。我如何使用纯CSS动画这个针?
I have tried my best here Jsfiddle. Now I want to animate the center needle point slowly to fastly from left to right. I have heard about css keyframes and tried it. But, it goes left and right. I didn't get the expected result. How do I animate this needle using just pure css?
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;
}
HTML
<div id="logo">
<span class="speedometer"></span>
<span class="needle"></span>
</div>
推荐答案
demo - http://jsfiddle.net/99oakz7w/2/
demo - http://jsfiddle.net/99oakz7w/2/
使用 @keyframes
@-webkit-keyframes move {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}
#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);
}
}
<div id="logo"> <span class="speedometer"></span>
<span class="needle"></span>
</div>
这篇关于动画车速表针与纯CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文