代码之家 › 专栏 › 技术社区 › Naomi

动画持续时间设置为分钟

css

Naomi · 技术社区 · 6 年前

我一直试图在这里找到答案,但不能。我正在创建一个CSS时钟,并希望设置小时指针,使动画的持续时间是基于分钟或小时,如果这是可能的。这是我能做的还是我只需要将持续时间设置为秒?

.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>

2 回复 | 直到 6 年前

Temani Afif 6 年前

使用 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>

Lesleyvdp 6 年前

持续时间可以以秒或毫秒为单位指定。你可以用(60*60*12)=43200s把它变成12个小时。这可以归结为:

.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>