تتمثل إحدى مزايا إنشاء
موقع الويب الشخصي الخاص بي من البداية بدلاً من استخدام سمة
جاهزة في أن أبدأ بإعدادات المتصفح الافتراضية وإضافة الألوان الخاصة بي تدريجياً. أحاول منع الموقع من الانتفاخ ، لكن التخصيص أمر مهم. من الضروري إيجاد حل وسط بين صفحات Spartan الخاصة بـ
Hacker News و
Craigslist من ناحية واحتقان
MySpace القديم من ناحية أخرى.
بطريقة ما ، صادفت موقعًا إلكترونيًا برموز متحركة فاخرة للروابط ، وأردت إدراك التأثير. لكن من المهم بالنسبة لي استخدام CSS الخالص ، لأنه من أجل هذه الأشياء التافهة ، لا يستحق إضافة JavaScript ، مما قد يسبب مشاكل في أداء الواجهة أو قابليتها للاستخدام (انظر
اختطاف شريط التمرير ).
إليك ما يبدو عليه التأثير الآن:
التنفيذ
رسم الخطوط تحت النص
موضوع معقد بشكل مدهش . كل هذا يتوقف على مدى استعدادك
للانحراف عن المعيار والتفاصيل التي تقلقك (على سبيل المثال ،
المرور بعناصر عن بعد من الحروف ).
لقد اكتشفت
نهجين . كلاهما ، في جوهرهما ، يزيلا
زخرفة النص القياسية ويضيفان حدودًا
مقلدة باستخدام
عناصر زائفة . ثم يتم تحريك هذه الحدود بواسطة
تحولات CSS . لسوء الحظ ، تحتوي هذه الحلول على عيب واحد: فهي لا تعمل بشكل طبيعي إذا كان الرابط يغطي أكثر من سطر واحد. يظهر التسطير فقط في السطر الأول.
في النهاية ، وجدت
CodePen الخاص بشاو ، خالٍ من هذا العيب ، وغيرت التأثير حسب ذوقي.
هنا هو رمز ذات الصلة. يمكنك أن تلعب معه على
repl.it.a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; }
دعونا ننظر في هذا الحل بمزيد من التفصيل.
أولاً ، قم بإيقاف تشغيل
text-decoration القياسية.
سيتعين علينا استخدام صورة خلفية لأنها يمكن أن تغطي عدة أسطر. على الرغم من أنه يمكنك التقاط صورة حقيقية ، إلا أنها مجرد خط ، لذلك نحن نستخدم
تدرجًا خطيًا سيولد صورة لنا. عادةً ما يتم استخدامه لإنشاء تدرج بين لونين مختلفين ، لكننا نحتاج إلى أن يكون التسطير بنفس لون الارتباط ، لذلك نحن نستخدم
CurrentColor لكل من بداية ونهاية التدرج اللوني. يخبرك
currentColor المستعرض باستخدام لون العنصر من خاصية
اللون .
استخدم وضع
الخلفية لوضع الصورة في الزاوية اليسرى السفلى. تتطابق قيمة
0% مع الموضع الأفقي ، و
100% تتوافق مع الموضع الرأسي.
قم بإيقاف تشغيل
الخلفية لتكرار مثيلات متعددة للصورة.
باستخدام
حجم الخلفية ، حدد العرض والارتفاع صفر بكسل. يعني الصفر العرض أن التسطير يظهر فقط على التحويم ، وإلا فإن الصورة غير مرئية.
اضبط
الانتقال ليناسب الخلفية ، بحيث يستغرق أي تغيير في الخاصية
0.3 ثانية.
عندما تقوم بالمرور فوق رابط ، فإننا نغير عرض الصورة بنسبة
100% ، وننشئ تسطيرًا كاملاً ، ويوفر
transition الرسوم المتحركة.
هذا كل شئ! أنا سعيد للغاية باختصار الكود. إذا كنت ترغب في إضافة شيء مشابه لموقعك ، فلا تتردد في اتخاذ هذا التطبيق أو رؤية بعض
تأثيرات التسطير المتحركة الأخرى.