تعبئة لون الخلفية من اليسار إلى اليمين باستخدام CSS

المفتاح هو الاستخدام خلفية متدرجة خطية تتكون من لونين وضبط حجم الخلفية ليكون ضعف عرض العنصر. يتيح لك هذا إنشاء انتقال سلس بين اللونين.

في البداية، ضع الخلفية على اليمين لتبدأ باللون الموجود في أقصى اليسار. عند التمرير، قم بتغيير موضع الخلفية إلى اليسار للكشف عن اللون الموجود في أقصى اليمين. لجعل الانتقال تدريجيًا، أضف الانتقال:كل 2s سهولة؛ property.

div { الخلفية: متدرجة خطية (إلى اليسار، أحمر 50%، أزرق 50%) إلى اليمين؛ حجم الخلفية: 200% 100%؛ الانتقال: سهولة كل 2S؛ } شعبة: تحوم { موضع الخلفية: يسار؛

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

للتحكم في نقاط البداية والنهاية للانتقال، اضبط النسب المئوية في التدرج الخطي. على سبيل المثال، إليك التكوين الذي ينتقل من 34% إلى 65% من عرض العنصر:

الخلفية: تدرج خطي (إلى اليسار، أحمر 34%، أزرق 65%) إلى اليمين؛ حجم الخلفية: 300% 100%;

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