ساعة تناظرية متحركة بسيطة في Tailwind.css

عقارب الساعة الخلفية

أثناء تصميم صفحة التفاصيل للمشاريع التي كنت أعمل عليها (متوفرة من صفحة محفظتي) ، قمت أيضًا بتنفيذ ساعة تناظرية متحركة بسيطة يتم عرضها بجانب مدة المشروع.

نظرًا لأنني لم أرغب في استخدام أي مكتبات أو مقاطع فيديو خارجية جديدة ، فقد قررت تنفيذ الساعة عبر Tailwind.css وأدواتها الرائعة للرسوم المتحركة.

أمثلة التعليمات البرمجية

ليس هناك الكثير لنقوله ، حيث اعتقدت أنه سيكون مفيدًا للغاية لك عندما أقدم بعض الأمثلة البرمجية لإعادة الاستخدام.

يكاد يكون التصميم في كل مثال هو نفسه أي متشابه للغاية. أقوم فقط بعرض بعض مربعات div من خلال وضع مطلق فوق بعضها البعض. نظرًا لأن كل صندوق يحتوي على أصغر عرض متاح فقط ، يبدو أنهما هي المؤشرات المرئية على مدار الساعة.

يوضح المثال الأخير كيفية البدء عند الساعة 12. يبدأ المثالان الأولان في الساعة 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>
  );
}