مولّد خلفيات التدرج المتحركة لـ CSS

أنشئ خلفيات متدرجة متحركة عبر الإنترنت، مع دعم ألوان متعددة واتجاهات حركة وقوالب جاهزة، وتوليد كود CSS بنقرة واحدة

وضع التنفيذ في المتصفح: تُعالج بياناتك في متصفحك ولا تُرفع إلى الخادم.

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

جارٍ تحميل الأداة، يرجى الانتظار...

إذا تعذر تحميل الأداة عبر الإنترنت أو تشغيلها، جرّب أداة سطح المكتب. https://tools.yikeaigc.com/

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

العودة إلى الإصدار القديم

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

معاينة مباشرة CSS Keyframes نص / حد / خلفية الإعدادات قابلة للحفظ

عدد الألوان-

نمط الحركة-

المدة-

غرض الإخراج-

إعدادات الألوان

البدء من قالب أسرع. تؤثر نقاط توقف الألوان في إيقاع انتقال التدرج، ويُفضّل إبقاء 2-6 ألوان.

قوالب أمثلة سيستبدل الألوان الحالية عند النقر

أساس التدرج الخطي مناسب لخلفيات الويب، والشعاعي لتأثير الإضاءة، والمخروطي للحدود أو الشارات

نوع التدرج

زاوية التدرج135°

135°

مركز شعاعي / مخروطي

نقاط توقف الألوان يجب إبقاء لونين، ويمكن ضبط حتى 8 ألوان

معلمات الحركة

يُنصح بسرعة تدفق أبطأ كخلفية للصفحة. عند تقليل الحركة، فعّل كود توافق تقليل الحركة.

نمط الحركة اختر منطق إنشاء Keyframes مختلفًا

اتجاه الحركة سيؤثر على إطارات background-position

السرعة والتكرار كلما كبر حجم الخلفية، زادت حركة الألوان

مدة الحركة10s

10s

حجم الخلفية400%

400%

منحنى الحركة

تكرار لا نهائي تشغيل ذهابًا وإيابًا إيقاف عند التحويم توافق تقليل الحركة

إنشاء وتصدير

بعد ضبط اسم الفئة وسيناريو الاستخدام، انسخ CSS إلى ملف أنماط المشروع، ثم أضف اسم الفئة للعنصر المطلوب.

إعدادات التطبيق يمكن لنفس لوحة الألوان إنشاء تأثيرات خلفية أو نص أو حدود

اسم فئة CSS

غرض الإخراج

الحد الأدنى لارتفاع الحاوية (px)

استدارة الزوايا (px)

عرض الحدود (px)

خلفية داخلية للحدود

كود CSS المُنشأ

مثال HTML

معاينة مباشرة

Animated Gradient بعد ضبط الألوان والاتجاه والسرعة، يتحدث التأثير فورًا. مناسب لواجهة الصفحة الرئيسية، ومناطق الأزرار، وخلفيات صفحات الحملات، والبطاقات المرئية. CSS Ready

نوع التدرج-

الاتجاه-

الحجم-

اسم الفئة-

التعليمات

تعليمات استخدام البرنامج

اختيار نظام الألوان: انقر على نموذج جاهز في “إعدادات الألوان”، أو أضف الألوان ونقاط التوقف واحذفها وعدّلها يدويًا.
تعيين نوع التدرج: اختر تدرجًا خطيًا أو شعاعيًا أو مخروطيًا، واضبط الزاوية وموضع المركز حسب الحاجة.
تكوين معلمات الحركة: في “معلمات الحركة”، اضبط نمط التدفق واتجاه الحركة والمدة وحجم الخلفية ومنحنى الحركة وطريقة التكرار.
اختيار غرض الإخراج: في “إنشاء وتصدير”، اختر حاوية خلفية أو نصًا متدرجًا أو حدًا متدرجًا، واضبط معلمات مثل اسم فئة CSS والزوايا المستديرة والحدود.
معاينة التأثير: يمكنك التبديل في الجهة اليمنى بين أوضاع معاينة الخلفية والبطاقة والنص والحدود، ثم إنشاء الكود بعد تأكيد النتيجة.
نسخ الكود أو تنزيله: انقر على “نسخ CSS” أو “نسخ HTML” أو “تنزيل CSS” لتطبيق الكود على عناصر الصفحة.
حفظ الإعدادات: انقر على “حفظ الإعدادات” للاحتفاظ بالمعلمات الحالية ومتابعة التحرير في المرة القادمة بسهولة.

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

ج: انسخ كود CSS إلى ملف الأنماط، ثم أضف اسم الفئة الموجود في مثال HTML إلى العنصر الذي تريد عرض التدرج عليه.

ج: التدرج الخطي مناسب لخلفيات الصفحات واللافتات؛ والتدرج الشعاعي مناسب لتأثيرات الإضاءة المركزة والانتشار الناعم؛ والتدرج المخروطي مناسب للحدود والشارات والمؤثرات البصرية ذات الإحساس بالدوران.

ج: يمكنك زيادة حجم الخلفية، أو زيادة عدد الألوان، أو تعديل نقاط توقف الألوان، أو اختيار أنماط حركة مثل التدفق القطري أو التدفق النابض.

ج: نعم. اختر “نص متدرج” في غرض الإخراج، وسيُنشئ الأداة كود CSS يتضمن background-clip:text.

الإجابة: يمكن استخدام خلفيات الصفحات العامة بشكل طبيعي. إذا كانت الصفحة تحتوي على الكثير من الرسوم المتحركة، يُنصح بزيادة مدة الحركة، وتقليل عدد الألوان، وتفعيل كود التوافق لتقليل التأثيرات الحركية.