Question

我使用CSS制作了一个模拟时钟并旋转了它的箭头。这工作正常，但是当我设置开始时间时会出现问题。例如，如果它是在12:00 pm，则第二个箭头在60秒内完全旋转，分钟箭头在3600秒内完成相同的操作，而时针在43200秒内完成。但是，如果时间是下午3:15:20，则第二个箭头应该从20秒开始移动。在这种情况下，我使用css按rotate(120deg)设置起点。但我的箭头无论如何都会从数字4旋转到12秒60秒，之后只需跳转到起点。我该如何解决这个问题？

看到小提琴，只有第二个箭头，但我认为问题是可见的： https://jsfiddle.net/vaxobasilidze/fdn28u7g/2/

＆＃13;

function setTime(){
    var time = new Date($.now());
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    var hourdeg = ((hour%12)*3600+minute*60+second)/43200*360;
    var minutedeg = (minute*60+second)/3600*360;
    var seconddeg = second/60*360;
    $('.hour').css({'transform':'rotate('+hourdeg+'deg)'});
    $('.minute').css({'transform':'rotate('+minutedeg+'deg)'});
    $('.second').css({'transform':'rotate('+seconddeg+'deg)'});
  }

setTime();

＆＃13;

.second {
	max-height: 80%;
    margin-left: 20%;
	z-index: 11;
	-webkit-animation:spin 60s linear infinite;
    -moz-animation:spin 60s linear infinite;
    animation:spin 60s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second"/>

＆＃13;

Answer 1

您正在更改旋转原点，而不是从0旋转到360，您将从180旋转到360.
这将导致动画看起来更慢，它将从360跳回到180.

您可以通过使用包装器包裹旋转元素来绕过这一点，然后转动包装器。

＆＃13;

function setTime() {
  var time = new Date($.now());
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  var hourdeg = ((hour % 12) * 3600 + minute * 60 + second) / 43200 * 360;
  var minutedeg = (minute * 60 + second) / 3600 * 360;
  var seconddeg = second / 60 * 360;
  $('.hour').css({
    'transform': 'rotate(' + hourdeg + 'deg)'
  });
  $('.minute').css({
    'transform': 'rotate(' + minutedeg + 'deg)'
  });
  //$('.second').addClass('.instant')
  $('.second-wrapper').css({
    'transform': 'rotate(' + seconddeg + 'deg)'
  });

}

setTimeout(() => {
  setTime()
}, 500);

＆＃13;

.second-wrapper {
  transition: transform 2s ease;
  transform: rotate(0deg);
  transform-origin: center center;
  background-color: WhiteSmoke;
  display: inline-block;
  margin-left: 20%;
}

.second {
  max-height: 80%;
  -webkit-animation: spin 60s linear infinite;
  -moz-animation: spin 60s linear infinite;
  animation: spin 60s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second-wrapper">
  <img src="http://moziru.com/images/clock-clipart-arrow-5.png" width="30px" height="300px" alt="second" title="second" class="clockHands second" />
</div>

＆＃13;

用CSS制作的时钟箭头工作不正确

1 个答案: