动画持续时间设置为分钟

Question

我一直在尝试在这里找到答案，但是找不到。我正在CSS中创建一个时钟，并希望设置小时指针，以便根据可能的分钟或小时来设置动画持续时间。这是我可以做的事情，还是我只需要将持续时间设置为秒？

here is a codepen

.spinner,
.wrapper .spinner1,
.wrapper .spinner2 {
  width: 100px;
  height: 100px;
  background: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 50px;
  display: inline-block;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.wrapper .spinner1:after,
.wrapper .spinner1:before {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  content: '';
  display: block;
}
.wrapper .spinner1:after {
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-top-color: #6787b7;
  border-bottom-color: #6787b7;
  animation: spinny 2s linear infinite;
}
.wrapper .spinner2 {
  border: 2px black solid;
}
.wrapper .spinner2:after {
  width: 2px;
  height: 50px;
  background: black;
  border-radius: 4px;
  position: absolute;
  top: 0%;
  left: 50%;
  content: '';
  display: block;
  margin-left: -1px;
  animation: time 60s linear infinite;
  transform-origin: bottom center;
}
.wrapper .spinner2:before {
  width: 4px;
  height: 25px;
  top: 25%;
  content: '';
  display: block;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  transform-origin: bottom center;
  animation: time 43200s linear infinite;
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes time {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="wrapper">
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>

Answer 1

持续时间可以以秒或毫秒为单位指定。您可以使用（60 * 60 * 12）= 43200s将其变为十二小时。可以归结为：

.spinner{width:100px;height:100px;background:lightblue;position:relative;border-radius:50%; margin:50px;display:inline-block;}


.wrapper{display:flex;justify-content:center;
  .spinner1{ &:extend(.spinner);
    &:after, &:before{width:100px; height:100px; border-radius:50%;content:'';display:block;}
    &:after{position:absolute;top:-4px;left:-4px;border: 4px solid transparent; border-top-color:#6787b7; border-bottom-color:#6787b7;animation: spinny 2s linear infinite}
  }
  .spinner2{&:extend(.spinner);border:2px black solid;
    &:after{width:2px;height:50px; background:black;border-radius:4px;position:absolute;top:0%;left:50%;content:'';display:block;margin-left:-1px;animation:time 60s linear infinite;transform-origin:bottom center}
    &:before{width:4px;height:25px;top:25%;content:'';display:block;background:black;position:absolute;left:50%;margin-left:-2px;transform-origin: bottom center;animation:time 43200 linear infinite}
  }
}

<div class="wrapper">
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>

Answer 2

为此使用calc，您只需编写calc(60 * 60 * 12 * 1s)

.spinner,
.wrapper .spinner1,
.wrapper .spinner2 {
  width: 100px;
  height: 100px;
  background: lightblue;
  position: relative;
  border-radius: 50%;
  margin: 50px;
  display: inline-block;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.wrapper .spinner1:after,
.wrapper .spinner1:before {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  content: '';
  display: block;
}
.wrapper .spinner1:after {
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid transparent;
  border-top-color: #6787b7;
  border-bottom-color: #6787b7;
  animation: spinny 2s linear infinite;
}
.wrapper .spinner2 {
  border: 2px black solid;
}
.wrapper .spinner2:after {
  width: 2px;
  height: 50px;
  background: black;
  border-radius: 4px;
  position: absolute;
  top: 0%;
  left: 50%;
  content: '';
  display: block;
  margin-left: -1px;
  animation: time calc(60 *1s) linear infinite;
  transform-origin: bottom center;
}
.wrapper .spinner2:before {
  width: 4px;
  height: 25px;
  top: 25%;
  content: '';
  display: block;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  transform-origin: bottom center;
  animation: time calc(60 * 60 * 12 * 1s) linear infinite;
}
@keyframes spinny {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes time {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="wrapper">
  <div class="spinner1"></div>
  <div class="spinner2"></div>
</div>