0
Надо уменьшить до 140px

.timer-group {
  position: relative;
}

.timer {
  border-radius: 50%;
  height: 100px;
  overflow: hidden;
  position: absolute;
  width: 100px;
}

.timer:after {
  background: #202020;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
}

.timer .hand {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 50%;
}

.timer .hand span {
  border: 5px solid rgba(0, 255, 255, .4);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  display: block;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(225deg);
  width: 0;
}

.timer .hand:first-child {
  transform: rotate(180deg);
}

.timer .hand span {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.timer .hand:first-child span {
  animation-name: spin1;
}

.timer .hand:last-child span {
  animation-name: spin2; 
}

.timer.minute {
  background-color: #ffe68d;
  height: 350px;
  left: 25px;
  width: 350px;
  top: 25px;
}

.timer.minute .hand span {
  animation-duration: 450s;
  border-top-color: #d12036;
  border-right-color: #d12036;
  border-width: 175px;
}

.timer.minute:after {
  height: 310px;
  left: 20px;
  width: 310px;
  top: 20px;
}

@keyframes spin1 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
<div class="timer-group">
    <div class="timer minute">
        <div class="hand"><span></span></div>
        <div class="hand"><span></span></div>
    </div>
</div>

2
  • чтоб не разбираться и менять весь код можете уменьшать пропорционально .timer.minute{transform: scale(0.5) а по хорошему можно сделать через css variables чтоб привязано было, при изменении одного параметра остальные считаются через calc min max, vh, vw...
    – Greg--
    29 ноя 2021 в 18:08
  • @Greg-- scale визуально конечно меняет размеры, но в потоке у элемента всё равно будут исходные величины. Будет пустое пространство, хоть и сам элемент по виду меньше 29 ноя 2021 в 21:48

1 ответ 1

0

Вынес размер в отдельную переменную. Меняешь её значение и меняется размер всего таймера. Единственное, на некоторых размерах может быть некорректное отображение черного круга по центру. Поменяй там функцию на нужные тебе значение, в коде комментарием пометил место.

:root {
  --timer-size: 140px
}

.timer-group {
  position: relative;
}

.timer {
  border-radius: 50%;
  height: 100px;
  overflow: hidden;
  position: absolute;
  width: 100px;
}

.timer:after {
  background: #202020;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
}

.timer .hand {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 50%;
}

.timer .hand span {
  border: 5px solid rgba(0, 255, 255, .4);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  display: block;
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(225deg);
  width: 0;
}

.timer .hand:first-child {
  transform: rotate(180deg);
}

.timer .hand span {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.timer .hand:first-child span {
  animation-name: spin1;
}

.timer .hand:last-child span {
  animation-name: spin2; 
}

.timer.minute {
  left: 25px;
  top: 25px;
  height: var(--timer-size);
  width: var(--timer-size);
  background-color: #ffe68d;
}

.timer.minute .hand span {
  animation-duration: 450s;
  border-top-color: #d12036;
  border-right-color: #d12036;
  border-width: calc(var(--timer-size) * 0.5);
}

/* change 'left' and 'top' to correct black circle position  */
.timer.minute:after {
  left: calc(var(--timer-size) * 0.057);
  top: calc(var(--timer-size) * 0.057);
  height: calc(var(--timer-size) * 0.88);
  width: calc(var(--timer-size) * 0.88);
}

@keyframes spin1 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
<div class="timer-group">
    <div class="timer minute">
        <div class="hand"><span></span></div>
        <div class="hand"><span></span></div>
    </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.