Simpla vigla analoga horloĝo en Tailwind.css

A Clockwork Tailwind

Dum projektado de la detala paĝo por projektoj, pri kiuj mi prilaboris (havebla ĉe mia biletujo-paĝo), mi ankaŭ efektivigis simplan viglan analogan horloĝon bildigatan apud la daŭro de la projekto.

Ĉar mi ne volis uzi novajn eksterajn bibliotekojn aŭ filmetojn, mi decidis efektivigi la horloĝon per Tailwind.css kaj ĝiaj bonegaj kuraĝigaj utiloj.

Kodekzemploj

Ne estas multe por diri alie, ĉar mi pensis, ke ĝi estus plej utila al vi, kiam mi simple provizos iujn kodajn ekzemplojn por reuzebleco.

La aranĝo en ĉiu ekzemplo preskaŭ similas al ĉiu tre simila. Mi nur redonas iujn div-skatolojn per absoluta lokado unu sur la alian. Ĉar ĉiu skatolo havas nur la plej malgrandan larĝon haveblan, ili ŝajnas esti la kursoroj videblaj en la horloĝo.

La lasta ekzemplo montras kiel komenci je la 12a horo. La unuaj du ekzemploj ĉiu komenciĝas je la 3a horo, ĉar ili estas aranĝitaj en la vico.

Ekzemplo 1: Plej simpla horloĝo

export function Clock() {
  return (
    <div className="flex justify-center py-10 group">
      <div className="relative flex items-center justify-end w-20 h-20 overflow-hidden bg-gray-900 rounded-full ">
        <div className="absolute w-1/2 h-1 bg-white rounded-full origin-left -rotate-12 group-hover:rotate-[215deg] duration-1000 ease-in-out" />

        <div className="absolute w-1/2 h-1  origin-left rotate-[70] group-hover:rotate-[340deg] duration-1000 ease-in-out">
          <div className="w-2/3 h-full bg-white rounded-full" />
        </div>

        <div className="absolute flex justify-center flex-1 w-full">
          <div className="w-1 h-1 bg-white rounded-full" />
        </div>
      </div>
    </div>
  );
}

Ekzemplo 2: horloĝo kun rando kaj indikiloj

import React from "react";
// Note that I'm using 'clsx' for
// composing classnames.
import clsx from "clsx";

export function Clock() {
  return (
    <div className="relative flex items-center justify-end w-20 h-20 overflow-hidden rounded-full ring-gray-600 ring-1">
      {Array.from({ length: 8 }, (_, i) => (
        <div
          key={i}
          style={{ height: 1 }}
          className={clsx("absolute w-1/2 origin-left flex justify-end", {
            "rotate-0": i === 0,
            "rotate-45": i === 1,
            "rotate-90": i === 2,
            "rotate-[135deg]": i === 3,
            "rotate-180": i === 4,
            "rotate-[225deg]": i === 5,
            "rotate-[270deg]": i === 6,
            "rotate-[315deg]": i === 7,
          })}>
          <div className="w-1/3 h-full bg-gray-600 rounded-full" />
        </div>
      ))}

      <div className="absolute w-1/2 h-1 bg-gray-300 rounded-full origin-left -rotate-12 group-hover:rotate-[215deg] duration-1000 ease-in-out" />

      <div className="absolute w-1/2 h-1  origin-left rotate-[85deg] group-hover:rotate-[340deg] duration-1000 ease-in-out">
        <div className="w-2/3 h-full bg-gray-300 rounded-full" />
      </div>

      <div className="absolute flex justify-center flex-1 w-full">
        <div className="w-1 h-1 bg-gray-300 rounded-full" />
      </div>
    </div>
  );
}

Ekzemplo 3: horloĝo komenciĝanta noktomeze

export function Clock() {
  return (
    <div className="flex justify-center py-10 group">
      <div className="relative flex flex-col items-center justify-start w-20 h-20 overflow-hidden bg-gray-900 rounded-full ">
        <div className="absolute w-1 duration-1000 ease-in-out origin-bottom bg-gradient-to-t from-white to-red-400 rounded-full h-1/2 group-hover:rotate-[200deg]" />

        <div className="absolute h-1/2 w-1 origin-bottom rotate-[55deg] group-hover:rotate-[340deg] duration-1000 ease-in-out flex flex-col justify-end">
          <div className="w-full rounded-full bg-gradient-to-t from-white to-blue-400 h-2/3" />
        </div>

        <div className="absolute flex items-center justify-center flex-1 w-full h-full">
          <div className="w-1 h-1 bg-white rounded-full" />
        </div>
      </div>
    </div>
  );
}