(Animasi) Angka Roman

Angka Roman, satu hingga sepuluh.

Demo

Rambang

<div class="labu">
 <div class="number number--1">
  <div class="line line--1"></div>
  <div class="line line--2"></div>
  <div class="line line--3"></div>
  <div class="line line--4"></div>
  <div class="line line--5"></div>
</div>
<div class="controls">
  <input class="range" type="range" value="1" max="10" min="1" step="1" /> 
  <label>
    <input class="random" type="checkbox" />
    Random
  </label>
  <button class="start-stop">⏸︎ Pause</button>
</div>
</div>
<style>
  .labu * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.labu {
  background: #cdd3d7;
  padding: 40px;
  font-family: system-ui, sans-serif;
}
input {
  accent-color: #0095f1;
}
:root {
  --w: 20px;
  --h: calc(var(--w) * 7);
}
@media (min-width: 500px) {
  :root {
    --w: 30px;
  }
}
.number {
  width: 0;
  height: var(--h);
  margin: 0 auto;
  position: relative;
  transition: transform 500ms;
  will-change: transform;
}
.line {
  width: var(--w);
  height: var(--h);
  border-radius: 100px;
  position: absolute;
  transition: transform 400ms;
  will-change: transform;
  border: 2px solid rgba(0, 0, 0, 0.1);
}
.line--1 {
  background: #3eddd8;
  transition-duration: 400ms;
}
.line--2 {
  background: #00c8e4;
  transition-duration: 450ms;
}
.line--3 {
  background: #06b0ee;
  transition-duration: 500ms;
}
.line--4 {
  background: #0095f1;
  transition-duration: 550ms;
}
.line--5 {
  background: #4375e8;
  transition-duration: 600ms;
}
.number--1 {
  transform: translateX(calc(-0.5 * var(--w)));
}
.number--2,
.number--3 {
  transform: translateX(calc(-1.75 * var(--w)));
}
.number--2 .line--4,
.number--3 .line--4 {
  transform: translateX(calc(2.5 * var(--w))) rotate(180deg);
}
.number--3 {
  transform: translateX(calc(-3 * var(--w)));
}
.number--3 .line--3 {
  transform: translateX(calc(5 * var(--w))) rotate(-180deg);
}
.number--4,
.number--5,
.number--6,
.number--7,
.number--8 {
  transform: translateX(calc(-3.8 * var(--w)));
}
.number--4 .line.line--4,
.number--5 .line.line--4,
.number--6 .line.line--4,
.number--7 .line.line--4,
.number--8 .line.line--4 {
  transform: translateX(calc(3.3 * var(--w))) rotate(-20deg) scaleY(1.05);
}
.number--4 .line.line--3,
.number--5 .line.line--3,
.number--6 .line.line--3,
.number--7 .line.line--3,
.number--8 .line.line--3 {
  transform: translateX(calc(5.47 * var(--w))) rotate(20deg) scaleY(1.05);
}
.number--5,
.number--6 {
  transform: translateX(calc(-4.8 * var(--w)));
}
.number--5 .line,
.number--6 .line {
  transform: translateX(calc(5.47 * var(--w))) rotate(200deg) scaleY(1.05);
}
.number--6,
.number--7,
.number--8 {
  transform: translateX(calc(-6.8 * var(--w)));
}
.number--6 .line,
.number--7 .line,
.number--8 .line {
  transform: translateX(calc(9 * var(--w))) rotate(-180deg);
}
.number--7,
.number--8 {
  transform: translateX(calc(-7.8 * var(--w)));
}
.number--7 .line.line--2,
.number--8 .line.line--2 {
  transform: translateX(calc(11.5 * var(--w)));
}
.number--8 {
  transform: translateX(calc(-9.5 * var(--w)));
}
.number--8 .line.line--5 {
  transform: translateX(calc(14 * var(--w)));
}
.number--9,
.number--10 {
  transform: translateX(calc(-3.8 * var(--w)));
}
.number--9 .line.line--4,
.number--10 .line.line--4 {
  transform: translateX(calc(4.5 * var(--w))) rotate(215deg) scaleY(1.18);
}
.number--9 .line.line--3,
.number--10 .line.line--3 {
  transform: translateX(calc(4.5 * var(--w))) rotate(-215deg) scaleY(1.18);
}
.number--10 {
  transform: translateX(calc(-5 * var(--w)));
}
.number--10 .line {
  transform: translateX(calc(4.5 * var(--w))) rotate(215deg) scaleY(1.18);
}
.controls {
  margin: 60px auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
label {
  font-size: 14px;
}
.start-stop {
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline: none;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 200ms, background-color 200ms;
  will-change: transform, background-color;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.75);
  width: 120px;
}
.start-stop:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.start-stop:active {
  background-color: rgba(255, 255, 255, 0.95);
  transform: scale(1);
}
.start-stop:focus-visible {
  outline: 5px solid rgba(255, 255, 255, 0.4);
}
</style>
<script>
  "use strict";
const $number = document.querySelector(".number");
const $range = document.querySelector(".range");
const $random = document.querySelector(".random");
const $startStop = document.querySelector(".start-stop");
let interval;
let isPlaying = true;
$range.addEventListener("input", () => {
    stop();
    $number.className = `number number--${$range.value}`;
});
$startStop.addEventListener("click", () => {
    if (isPlaying) {
        stop();
    }
    else {
        start();
    }
});
function stop() {
    isPlaying = false;
    $startStop.innerHTML = "⏵︎ Play";
    clearInterval(interval);
}
function start() {
    isPlaying = true;
    $startStop.innerHTML = "⏸ Pause";
    const MAX = 10;
    interval = setInterval(() => {
        const random = $random.checked;
        const value = parseInt($range.value, 10);
        const n = random
            ? // 1 - 9 for random if 10 was included number could repeat
                Math.ceil(Math.random() * 9)
            : // increment by 1
                1;
        let newValue = value + n;
        if (newValue > MAX) {
            newValue = newValue % MAX;
        }
        $range.value = newValue;
        $number.className = `number number--${$range.value}`;
    }, 1000);
}
start();
</script>

- Ketahui lebih lanjut tentang angka Roman di Wikipedia

Rujukan CSS & JS di codepen.io/stanko/pen/ZEVqZGw