时钟动画

            
            * {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,90%);
    --fg: hsl(var(--hue),10%,10%);
    --primary: hsl(var(--hue),90%,55%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
    background-color: var(--bg);
    color: var(--fg);
    font: 1em/1.5 "DM Sans", sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}

.clock {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
.clock__block {
    background-color: hsl(var(--hue),10%,90%);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem hsla(var(--hue),90%,50%,0.3);
    font-size: 3em;
    line-height: 2;
    margin: 0.75rem;
    overflow: hidden;
    text-align: center;
    width: 6rem;
    height: 6rem;
    transition:
        background-color var(--trans-dur),
        box-shadow var(--trans-dur);
}
.clock__block--small {
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,50%,0.3);
    font-size: 1em;
    line-height: 3;
    width: 3rem;
    height: 3rem;
}
.clock__colon {
    display: none;
    font-size: 2em;
    opacity: 0.5;
    position: relative;
}
.clock__colon:before,
.clock__colon:after {
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    top: -0.05em;
    left: -0.05em;
    width: 0.1em;
    height: 0.1em;
    transition: background-color var(--trans-dur);
}
.clock__colon:before {
    transform: translateY(-200%);
}
.clock__colon:after {
    transform: translateY(200%);    
}
.clock__digit-group {
    display: flex;
    flex-direction: column-reverse;
}
.clock__digits {
    width: 100%;
    height: 100%;
}
.clock__block--bounce {
    animation: bounce 0.75s; 
}
.clock__block--bounce .clock__digit-group {
    animation: roll 0.75s ease-in-out forwards; 
    transform: translateY(-50%);
}
.clock__block--delay1,
.clock__block--delay1 .clock__digit-group {
    animation-delay: 0.1s;
}
.clock__block--delay2,
.clock__block--delay2 .clock__digit-group {
    animation-delay: 0.2s;
}

/* Dark theme */
/* @media (prefers-color-scheme: dark) { */
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
    .clock__block {
        background-color: hsl(var(--hue),90%,40%);
        box-shadow: 0 1rem 2rem hsla(var(--hue),90%,60%,0.4);
    }
    .clock__block--small {
        box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,60%,0.4);
    }
/* } */

/* Beyond mobile */
@media (min-width: 168px) {
    .clock {
        flex-direction: row;
    }
    .clock__colon {
        display: inherit;
    }
}

/* Animations */
@keyframes bounce {
    from,
    to {
        animation-timing-function: ease-in;
        transform: translateY(0);
    }
    50% {
        animation-timing-function: ease-out;
        transform: translateY(15%);
    }
}
@keyframes roll {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(0);
    }
}
        

            
            window.addEventListener("DOMContentLoaded",() => {
    const clock = new BouncyBlockClock(".clock");
});

class BouncyBlockClock {
    constructor(qs) {
        this.el = document.querySelector(qs);
        this.time = { a: [], b: [] };
        this.rollClass = "clock__block--bounce";
        this.digitsTimeout = null;
        this.rollTimeout = null;
        this.mod = 0 * 60 * 1000;

        this.loop();
    }
    animateDigits() {
        const groups = this.el.querySelectorAll("[data-time-group]");

        Array.from(groups).forEach((group,i) => {
            const { a, b } = this.time;

            if (a[i] !== b[i]) group.classList.add(this.rollClass);
        });

        clearTimeout(this.rollTimeout);
        this.rollTimeout = setTimeout(this.removeAnimations.bind(this),900);
    }
    displayTime() {
        // screen reader time
        const timeDigits = [...this.time.b];
        const ap = timeDigits.pop();

        this.el.ariaLabel = `${timeDigits.join(":")} ${ap}`;

        // displayed time
        Object.keys(this.time).forEach(letter => {
            const letterEls = this.el.querySelectorAll(`[data-time="${letter}"]`);

            Array.from(letterEls).forEach((el,i) => {
                el.textContent = this.time[letter][i];
            });
        });
    }
    loop() {
        this.updateTime();
        this.displayTime();
        this.animateDigits();
        this.tick();
    }
    removeAnimations() {
        const groups = this.el.querySelectorAll("[data-time-group]");
    
        Array.from(groups).forEach(group => {
            group.classList.remove(this.rollClass);
        });
    }
    tick() {
        clearTimeout(this.digitsTimeout);
        this.digitsTimeout = setTimeout(this.loop.bind(this),1e3);    
    }
    updateTime() {
        const rawDate = new Date();
        const date = new Date(Math.ceil(rawDate.getTime() / 1e3) * 1e3 + this.mod);
        let h = date.getHours();
        const m = date.getMinutes();
        const s = date.getSeconds();
        const ap = h < 12 ? "AM" : "PM";

        if (h === 0) h = 12;
        if (h > 12) h -= 12;

        this.time.a = [...this.time.b];
        this.time.b = [
            (h < 10 ? `0${h}` : `${h}`),
            (m < 10 ? `0${m}` : `${m}`),
            (s < 10 ? `0${s}` : `${s}`),
            ap
        ];

        if (!this.time.a.length) this.time.a = [...this.time.b];
    }
}