Продолжительность анимации установлена в минутах

Я пытался найти здесь ответ, но не могу. Я создаю часы в 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>

css

30.08.2018 13:20

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Продолжительность может быть указана в секундах или миллисекундах. Вы можете превратить его в двенадцать часов, используя (60 * 60 * 12) = 43200 с. Это сводится к:

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

Да, я имею в виду, что понял это. Вы знаете, могу ли я написать это как (60 * 60 * 12) или мне придется это написать.

— 30.08.2018 13:26

@Naomi Вы можете использовать функцию calc, например расчет (60 * 60 * 12 * 1 с)

— 30.08.2018 13:35

30.08.2018 13:25

Ответ принят как подходящий

Используйте для этого 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>

30.08.2018 13:32

Другие вопросы по теме

События-указатели: ни один из них не работает в Safari v7 на iPad

Значение звездочек (*) между селекторами CSS

CSS - внутренний div не принимает доступную высоту

Проблема с гладким вертикальным слайдером

Slick Slider - как сохранить активную пагинацию (точку) всегда по центру

Как изменить время слайда (автозапуск) в JtaCarousel JQuery?

Как сделать детей 100% высотой их родителя flexbox, не добавляя 100% высоты каждому дочернему элементу

Как избавиться от акцентов с помощью CSS

Как заполнить цвет внутри плиток с помощью координат плитки Google Maps?

Остановить позицию абсолютного дочернего элемента от получения ширины родителя

Продолжительность анимации установлена ​​в минутах

Ответы 2

Другие вопросы по теме

Похожие вопросы

Продолжительность анимации установлена в минутах