ドラム回転式クロック

/* シンプル */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent：透過
    #fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
    rgb(255,0,0)、rgba(255,0,0,128)：RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
    */
    --background-color: transparent;
    --drum-color: #3e4149;
    --font-color: #ffffff;
    --font: 'Bebas Neue'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
    --frame-emboss: 10px; /* フレームのエンボスサイズ */
    --frame-radius: 20px; /* フレームの角丸 */
    --easing: 0.1; /* ドラム回転時間 0～0.5 */
    --easing-function: ease-in-out /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}

/* レトロ */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent：透過
    #fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
    rgb(255,0,0)、rgba(255,0,0,128)：RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
    */
    --background-color: transparent;
    --drum-color: #e7e1c5;
    --font-color: #463429;
    --font: 'BenchNine'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
    --frame-emboss: 10px; /* フレームのエンボスサイズ */
    --frame-radius: 40px; /* フレームの角丸 */
    --easing: 0.5; /* ドラム回転時間 0～0.5 */
    --easing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}

/* ポップ */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent：透過
    #fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
    rgb(255,0,0)、rgba(255,0,0,128)：RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
    */
    --background-color: transparent;
    --drum-color: #ffffff;
    --font-color: #f87902;
    --font: 'Changa One'; /* Bebas Neue , BenchNine, Changa One , Stardos Stencil*/
    --frame-emboss: 0; /* フレームのエンボスサイズ */
    --frame-radius: 25px; /* フレームの角丸 */
    --easing: 0.5; /* ドラム回転時間 0～0.5 */
    --easing-function: cubic-bezier(0.68, 1.95, 0.01, 0.6) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}

/* ステンシル */
:root {
    /*
    背景色、発光色、通常色の設定
    transparent：透過
    #fff、#ffffff、#fff8、#ffffff88：カラーコード（透過度対応）
    rgb(255,0,0)、rgba(255,0,0,128)：RGB
    hsl(0,100%,100%)、hsla(0,100%,100%,0.5)：HSL
    */
    --background-color: transparent;
    --drum-color: #2e3623;
    --font-color: #ffffff;
    --font: 'Stardos Stencil'; /* Bebas Neue , BenchNine, Changa One, Stardos Stencil */
    --frame-emboss: 2px; /* フレームのエンボスサイズ */
    --frame-radius: 20px; /* フレームの角丸 */
    --easing: 0.5; /* ドラム回転時間 0～0.5 */
    --easing-function: steps(6, end) /* ドラム回転時のイージング linear, ease, ease-in, ease-out, ease-in-out, steps(x, end), cubic-bezier */
}