إذا كنت ترغب في إضافة تعبير إضافي إلى النص الخاص بك وجذب انتباه القارئ ، فإن إحدى الطرق لتحقيق ذلك هي استخدام خط متلألئ مذهل. يمكن استخدام نمط النص هذا لإنشاء عناوين فريدة تؤكد على النقاط المهمة أو ببساطة للفت الانتباه إلى التصميم الإبداعي لموقعك.
قد يبدو إنشاء خط متلألئ مذهل مهمة شاقة ، ولكنه في الواقع ميسور التكلفة حتى بالنسبة للمطورين المبتدئين. في هذا الدليل ، سنخبرك ببعض الطرق لإضافة هذا التأثير المثير للاهتمام إلى النص الخاص بك.
الطريقة الأولى هي استخدام خاصية الرسوم المتحركة كس لإنشاء وميض الرسوم المتحركة. يمكنك تحديد إطارات مفتاحية للرسوم المتحركة تتغير فيها مؤشرات الشفافية للنص ، ثم تطبيق هذه الرسوم المتحركة على عنصر النص الخاص بك. يمكنك أيضا ضبط سرعة الحركة ومدة الحلقة.
من المهم أن تضع في اعتبارك التوازن عند استخدام خط وميض. يمكن أن تكون التأثيرات الشديدة مزعجة وتجعل من الصعب قراءة النص. ابحث عن أفضل خيار يجذب الانتباه ، ولكن لا يصرف الانتباه عن المحتوى.
- كيفية إضافة تأثيرات إلى الخطوط: دليل مفصل
- تعلم أساسيات كس لإنشاء نص الخفقان
- تطبيق الرسوم المتحركة على النص باستخدام خصائص كس
- نضيف تأثير الخفقان إلى النص باستخدام الإطار الرئيسي كس
كيفية إضافة تأثيرات إلى الخطوط: دليل مفصل
الخطوة 1: حدد النص الذي تريد إضافة تأثيرات إليه. يرجى ملاحظة أن التأثيرات قد تكون أكثر وضوحا على العناوين الكبيرة أو الخطوط الغامقة.
الخطوة 2: حدد التأثير الذي ترغب في إضافته إلى النص. تتضمن بعض التأثيرات الشائعة الوميض والظل والسكتة الدماغية والرسوم المتحركة. يمكنك استخدام كس أو جافا سكريبت لإنشاء هذه التأثيرات.
الخطوة 3: إذا كنت ترغب في إضافة تأثيرات باستخدام كس ، فاستخدم خاصية "نص الظل" لإنشاء الظلال ، وخاصية "الرسوم المتحركة" لإنشاء الرسوم المتحركة ، وخاصية "الحدود" لإنشاء مخططات نصية.
الخطوة 4: إذا كنت تفضل استخدام جافا سكريبت ، فقم بإنشاء وظيفة ستطبق التأثير المحدد على النص. على سبيل المثال ، يمكنك استخدام وظيفة سيتينتيرفال لإنشاء تأثير وميض.
الخطوة 5: جرب مجموعات مختلفة من التأثيرات والإعدادات للعثور على النمط المثالي للنص الخاص بك. ضع في اعتبارك أن بعض التأثيرات قد تعمل بشكل أفضل مع بعض الخطوط والألوان.
الخطوة 6: تحقق من شكل النص الخاص بك مع تأثيرات إضافية على الأجهزة والمتصفحات المختلفة. تأكد من أن التأثيرات تبدو جيدة وقابلة للقراءة.
نتيجة لذلك ، يمكن أن تضيف إضافة تأثيرات إلى الخطوط أصالة وتجذب النص الخاص بك. لا تخف من التجربة والعثور على مجموعات فريدة من التأثيرات لتعزيز الانطباع المرئي للنص الخاص بك.
تعلم أساسيات كس لإنشاء نص الخفقان
- اختيار العنصر: لتطبيق الأنماط على نص معين ، حدد عنصر هتمل المناسب باستخدام محدد كس. على سبيل المثال ، لتحديد جميع الفقرات في الصفحة ، يمكنك استخدام محدد "ص".
- الخصائص والقيم: لإنشاء وميض مذهلة من النص ، تحتاج إلى استخدام كس الرسوم المتحركة. يتم تحقيق ذلك من خلال تحديد الإطارات الرئيسية وخصائص الرسوم المتحركة. على سبيل المثال ، تحدد خاصية" اسم الرسوم المتحركة "اسم الرسوم المتحركة ، وتحدد خاصية" مدة الرسوم المتحركة " مدة الرسوم المتحركة.
- الإطارات الرئيسية: تحدد الإطارات الرئيسية أنماطا محددة يجب عرضها في مراحل مختلفة من الرسوم المتحركة. على سبيل المثال ، يمكنك تعيين أنماط البداية والنهاية ، بالإضافة إلى الإطارات الوسيطة لإنشاء انتقال سلس.
- تطبيق الرسوم المتحركة: بعد تحديد الإطارات الرئيسية ، تحتاج إلى تطبيق الرسوم المتحركة على العنصر المحدد. للقيام بذلك ، يتم استخدام خاصية" الرسوم المتحركة " ، والتي تحدد اسم الرسوم المتحركة ومعلمات الرسوم المتحركة الأخرى ، مثل مدة الانتقال وسلاسته.
على سبيل المثال ، لإنشاء نص الخفقان ، يمكنك استخدام التعليمات البرمجية كس التالية:
ص {
الرسوم المتحركة-الاسم: وميض;
الرسوم المتحركة-المدة: 1 ثانية;
الرسوم المتحركة-التكرار-العد: لانهائي;
}
@إطارات مفتاحية وميض {0 ٪ { التعتيم: 1؛}
50 ٪ { التعتيم: 0؛}
في هذا المثال ، نختار جميع الفقرات في الصفحة ونطبق رسما متحركا باسم"وميض". تستمر الرسوم المتحركة 1 ثانية وتكرر عددا لا حصر له من المرات. تحدد الإطارات الرئيسية أن النص مرئي بالكامل في البداية ، ثم يختفي لـ 50 ٪ من الرسوم المتحركة ويصبح مرئيا مرة أخرى لـ 100 ٪ من الرسوم المتحركة.
الآن بعد أن تعلمت أساسيات كس لإنشاء نص متلألئ ، يمكنك البدء في تجربة وإنشاء تأثيرات مثيرة للاهتمام لموقع الويب الخاص بك!
تطبيق الرسوم المتحركة على النص باستخدام خصائص كس
لإنشاء تأثير الخفقان ، يمكنك استخدام إطارات مفتاحية الرسوم المتحركة ، خاصية كس خاصة. يحدد سلسلة من الإطارات الرئيسية التي تمر من خلالها الرسوم المتحركة. يمثل كل إطار رئيسي تغييرا في أنماط عنصر ما في وقت معين.
وفيما يلي مثال على رمز كس لإنشاء نص الخفقان:
- 0% {
التعتيم: 1;
- }
50% {- التعتيم: 0;
}