كيف أنشأت رسومًا متحركة تغير المزاج باستخدام أقنعة CSS

هل تتذكر الرسوم المتحركة التي شاهدناها عندما كان طفلاً؟ في ذلك الوقت كانت تجسيد للرسوم المتحركة. الآن الرسوم المتحركة ليست مجرد رسوم متحركة ، نلتقي بها كل يوم تقريبًا ، أو نتحقق من الهاتف أو باستخدام أي جهاز يحتوي على شاشة.

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



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

دعنا نبدأ

سنستخدم تقنية CSS ، التي نادرًا ما يستخدمها مطورو الويب ، ولكن غالبًا ما يلجأ إليها المصممون. يطلق عليه اخفاء.

ما الذي يتبادر إلى ذهنك عندما تسمع عبارة "قناع"؟ ربما تخيلت شيئًا يحجب الجوهر. هذا كل ما نحتاج إلى معرفته.

انتظر - لكن المقالة تدور حول كتابة واستخدام الرسوم المتحركة CSS ... لا داعي للذعر! حسنًا!

قم بإنشاء قناع أساسي

افترض أن لدينا علامة div background: green; ويبدو شيء من هذا القبيل:



يوجد أيضًا ملف face.svg :



إذا طبقنا mask-image: url (face.svg); خاصية CSS mask-image: url (face.svg); إلى علامة div ، ستندهش لرؤية النتيجة:



قد تعتقد أن هذا غريب. تم وضع صورة face.svg على الجزء العلوي من div ، لكنها أخذت لون الخلفية. هذا مخالف لتوقعاتنا. يحدث هذا بسبب خاصية mask-type ، مما يجعل الجزء المعتم من svg شفافًا. وبالتالي ، يصبح لون الخلفية مرئيًا.

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

 background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1)); 

ستكون النتيجة هكذا:

مضيفا الرسوم المتحركة

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



الآن mask-image لديها خيار رائع يسمح لك باستخدام صور متعددة كأقنعة. لذلك ، يمكننا القيام بذلك: mask-image: url (face.svg), url (expression.svg); . إليك ما حدث:



أحد أهم خصائص أقنعة CSS هو mask-position ، الذي يقع القناع في الزاوية اليسرى العليا بالنسبة للعنصر الأصلي. ويمكنني ترتيب عدة أقنعة باستخدام خاصية mask-position mask-image تمامًا مثل mask-image . لجعل الوجه حزينًا ، استخدم شيئًا مثل هذا: mask-position: 0 0, 0 12px; . إليك ما حدث.



الموضع الأول هو 0 0 لـ face.svg ، face.svg الثاني 12 0 12px هو لـ face.svg . أدى هذا إلى نقل 12 بكسل وأعطى الوجه التعبير الضروري.

تطبيق الوظائف

الآن دعنا نحرك هذه التعبيرات عند المرور. الرمز الكامل الذي نحصل عليه بعد تطبيق فئة التحويم الزائفة سيكون كما يلي:

 i { background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1)); mask-image: url('face.svg'), url('expression.svg'); mask-position: 0 0, 0 12px; /* To make the sad expression */ transition: mask-position .5s ease-out; } i:hover { background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1)); mask-position: 0 0, 0 0; /* To make the happy expression */ transition: mask-position .1s linear; } 

بعد لعب المزيد مع خصائص CSS ، يمكننا القيام بذلك:



هذه إحدى الطرق التي يمكنك استخدامها لإنشاء الرسوم المتحركة المثيرة للغاية التي نواجهها يوميًا تقريبًا.

نقطة مهمة واحدة

قد لا يعمل الإخفاء في جميع المتصفحات. لجعله يعمل في جميع المتصفحات ، ما -webkit- سوى إضافة علامات متصفح خاصة مثل -webkit- و -moz- و -0- .

يمكنك رؤية الكود الكامل على github و codepen . شكرا لك! اتمنى ان تكون مفيدة

ألق نظرة على VPS.today ، موقع للعثور على خوادم افتراضية. 1500 تعريفة من 130 مضيفًا ، وواجهة مريحة وعددًا كبيرًا من المعايير للعثور على أفضل خادم افتراضي.