我在这里尽了最大努力Jsfiddle。现在我想慢慢地从左到右快速地动画中心针尖。我听说过css关键帧并尝试过。但是,它左右。我没有得到预期的结果。如何使用纯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>
答案 0 :(得分:7)
演示 - 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);
}
}
&#13;
<div id="logo"> <span class="speedometer"></span>
<span class="needle"></span>
</div>
&#13;
答案 1 :(得分:2)
答案 2 :(得分:0)
我几乎可以按照您想要的方式移动针,但远离中心http://jsfiddle.net/99oakz7w/1/
CSS
@-webkit-keyframes move{
0%{transform:rotate(0deg);}
10%{transform:rotate(-45deg);}
20%{transform:rotate(30deg);}
50%{transform:rotate(80deg);}
100%{transform:rotate(90deg);}
}
答案 3 :(得分:0)
Akshay只需要在CSS的第28行之后插入transform-origin: bottom;
。