Softonic

مولّد حركة دوّامة CSS

خطوة 1 / 2
التالي

حركة دوّامة CSS هي حلقة تدور بلا توقف عبر قاعدة keyframes. هنا تحدد مدة الدورة الواحدة، وتعاين الحركة، ثم تنسخ الصنف وكتلة @keyframes معاً.

كيف تضبط الحركة

  1. 1

    أدخل السرعة

    في حقل السرعة (ث)، اكتب عدد الثواني التي تستغرقها دورة كاملة، مثل 0.8 أو 1.2.

  2. 2

    راقب المعاينة

    تدور الحلقة بهذه السرعة فوراً، فيمكنك الحكم على مدى هدوئها أو إلحاحها.

  3. 3

    اضبط الحجم واللون

    غيّر الحجم والسماكة واللون ليناسب المكان الذي ستظهر فيه الحركة.

  4. 4

    انسخ الشيفرة CSS

    انسخ القواعد المولّدة. سطر الحركة وقواعد keyframes يعملان معاً.

كيف بُنيت الحركة

تتكون الشيفرة CSS المولّدة من جزأين يعملان كزوج. خاصية animation على .loader تسمي الحركة، وتحدد مدتها ودالة التوقيت، وتكررها:

animation: spin 0.8s linear infinite;

تصف قاعدة @keyframes spin الحركة نفسها. لها حالة نهائية واحدة فقط، وهي دوران بمقدار 360 درجة. يبدأ المتصفح من الموضع الطبيعي للعنصر ويتدرج حتى تلك الحالة النهائية:

@keyframes spin {
  to { transform: rotate(360deg); }
}

يصبح حقل السرعة في الأداة هو المدة. أما linear وinfinite وبقية السطر فتبقى كما هي.

اختيار المدة

الثواني لكل دورة الإحساس
0.4 إلى 0.6 سريعة ومزدحمة، وقد تبدو متوترة
0.8 إلى 1 ثابتة، وهي الخيار المعتاد
1.2 إلى 1.6 هادئة، مناسبة للدوّامات الكبيرة
2 أو أكثر بطيئة، وقد تبدو متوقفة

قد تدور الحلقات الكبيرة ببطء أكبر قليلاً من الصغيرة، لأن حافة الدائرة الكبيرة تقطع مسافة أطول في كل ثانية.

لماذا التوقيت الخطي

تستخدم الأداة linear حتى تحافظ الحلقة على السرعة الزاوية نفسها طوال الدورة. منحنيات التخفيف مثل ease-in-out تجعل الحلقة تتباطأ وتتسارع في كل دورة، وهذا يبدو كتقطّع في حلقة لا تنتهي. إذا أردت هذا التأثير رغم ذلك، فغيّر كلمة linear في الشيفرة الملصوقة.

قيود ينبغي تذكرها

  • السرعة 0 تعطي حركة بطول صفر، فلن تدور الحلقة بشكل مرئي. استخدم قيمة أكبر من 0.
  • تدور الدوّامة دائماً باتجاه عقارب الساعة. لعكس الاتجاه، بدّل الدوران النهائي إلى -360deg بعد النسخ.
  • الحركة دوران متصل واحد. أما النبض أو الارتداد أو الحركة متعددة المراحل فتحتاج إلى إطارات رئيسية إضافية تكتبها يدوياً.

إيقاف الحركة مؤقتاً والتحكم بها

بعد وضع الشيفرة في صفحتك، يمكنك التحكم بالحركة عبر الخصائص القياسية في CSS. ضبط animation-play-state: paused; يجمّد الحلقة في مكانها، وهذا مفيد عندما ينتهي العمل لكن العنصر يبقى ظاهراً. ضبط animation-delay: 0.2s; يؤخر البداية، فتظهر الدوّامة فقط إذا لم يكن الانتظار فورياً. هذه خصائص CSS عادية تضيفها إلى قاعدة .loader بعد النسخ.

الأسئلة الشائعة

خفّض الرقم في حقل السرعة (ث). القيمة 0.6 تعني أن الدورة الكاملة تستغرق ستة أعشار الثانية، فتدور أسرع من القيمة 1.

تكرر الحركة دون نهاية. إذا استبدلتها برقم مثل 3، تتوقف الحلقة بعد ثلاث دورات.

نعم. غيّر الاسم في الموضعين: بعد animation: في الصنف، وبعد @keyframes. يجب أن يتطابقا تماماً.

يستطيع المتصفح تحريك transform دون إعادة حساب تخطيط الصفحة، لذلك هو طريقة خفيفة لتحريك العنصر، وغالباً ما يبقى سلساً حتى على الأجهزة المتواضعة.

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

محوّل ترميز ملفات النصوص

حوّل النص بين UTF-8 وUTF-16 وLatin-1 وWindows-1252 وترميزات أخرى لإصلاح الأحرف المشوّهة.

مولّد ملف .gitignore

اجمع قواعد استبعاد المشروع لـ Laravel وNode.js وPython وRails. انسخ الناتج أو نزّل ملف ZIP يحتوي على .gitignore، مع إبقاء القواعد الشخصية منفصلة.

أداة فك ترميز Protocol Buffers

فك ترميز بايتات Protobuf محليًا من hex أو Base64 أو Base64URL أو نص أو ملف، مع فحص دقيق للحقول وتصدير تقرير خاص.

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

أداة إزالة التشفير في لغة جافا سكريبت (JavaScript Deobfuscator)

فك تمويه شيفرة JavaScript المضغوطة أو المموّهة: فك طبقات eval وpacker، وفك ترميز السلاسل المهرَّبة، وتضمين مصفوفات السلاسل، وتبسيط الثوابت، وإعادة تسمية أسماء _0x وتنسيق الشيفرة.

الأداة متاحة بلغات أخرى

أدلة وحالات استخدام