我已经尽力了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>
最佳答案
演示 - 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>
关于html - 用纯 CSS 制作速度计指针动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26814639/