פּשוט אַנאַמייטיד אַנאַלאָג זייגער אין Tailwind.css

א קלאָקווערק טיילוויינד

בשעת דיזיינינג די דעטאַל בלאַט פֿאַר פּראַדזשעקס איך ווע שוין ארבעטן אויף (בנימצא פֿון מיין פּאָרטפעל בלאַט), איך אויך ימפּלאַמענאַד אַ פּשוט אַנימאַטעד אַנאַלאָג זייגער וואָס איז רענדערד ווייַטער צו די געדויער פון די פּרויעקט.

ווייַל איך וואָלט נישט וועלן צו נוצן קיין פונדרויסנדיק לייברעריז אָדער ווידיאס, איך באַשלאָסן צו ינסטרומענט די זייגער דורך Tailwind.css און זיין גרויס אַנאַמיישאַן יוטילאַטיז.

קאָדעקס ביישפילן

עס איז ניט פיל צו זאָגן אַנדערש, ווייַל איך געדאַנק אַז דאָס וואָלט זיין די מערסט נוציק פֿאַר איר ווען איך נאָר צושטעלן עטלעכע ביישפילן פון קאָד פֿאַר ריוזאַביליטי.

דער אויסלייג אין יעדער ביישפּיל איז כּמעט די זעלבע ווי זייער ענלעך. איך נאָר מאַכן עטלעכע דיוו-באָקסעס דורך אַבסאָלוט פּאַזישאַנינג אויף שפּיץ פון יעדער אנדערער. ווייַל יעדער קעסטל איז בלויז דער קלענסטער ברייט בנימצא, זיי ויסקומען ווי די קורסאָרס קענטיק אין די זייגער.

די לעצטע ביישפּיל דעמאַנסטרייץ ווי צו אָנהייבן 12: 00. די ערשטע צוויי ביישפּיל ביי יעדער אָנהייב ביי 3 זייגער ווי זיי זענען געלייגט אין די רודערן.

בייַשפּיל 1: די מערסט פּשוט זייגער

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>
  );
}

בייַשפּיל 2: זייגער מיט גרענעץ און ינדאַקייטערז

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>
  );
}

בייַשפּיל 3: זייגער וואָס סטאַרץ ביי האַלבנאַכט

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>
  );
}