30 Cool CSS Animations يجب أن تراها

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

من تحميل الرسوم المتحركة إلى التبديل ، والنوافذ المشروطة إلى اهتزاز العناصر ، هذه الكومة من 30 الاستخدامات غير العادية والإبداعية للرسوم المتحركة CSS يمكن أن تفتح عقلك لمزيد من الطرق التي يمكنك لعبها باستخدام الرسوم المتحركة لـ CSS والتي ربما لم تفكر بها من قبل.

CSS Loading الرسوم المتحركة بواسطة patrikhjelm

سبع نقاط متحركة تحول اليسار واليمين للدلالة على إجراء التحميل.

أيقونة سلة التسوق المتحركة بواسطة jonitrythall

تأثيرات الرسوم المتحركة لطيف عندما تضاف البقالة إلى عربة التسوق. انتقل لأسفل لمزيد من المعلومات.

همبرغر CSS3 الرسوم المتحركة فقط من قبل داود كراجيفسكي

بنيت مع CSS النقي ، لا JS أو أي شيء آخر.

404 حرف الرسوم المتحركة بواسطة وبواسطة

على الأقل مع صفحة الخطأ هذه ، يعمل المطور على ذلك. حتى لو كان 404.

CSS Mars Landing بواسطة mgitch

لقد هبطنا على المريخ! صنع مع CSS.

المنتقم بواسطة mariosmaselli

هل يمكن أن تسمع غضب الهيكل يهز من خلال الشاشة؟ رائع ، صحيح?

يوم / ليلة تبديل بواسطة jsndks

الآن ، يمكنك التبديل بين الليل والنهار باستخدام CSS. فكرة عبقرية!

Google Now 3rd party application by codecalm

جوجل الآن تطبيقات الطرف الثالث ، والرسوم المتحركة.

كلو كلو بواسطة judag

هل يتحرك الديك هكذا؟ لقد راهنت على ذلك ، مع استكمال الرقبة جيغي. ممارسة CSS3 كبيرة.

الرسوم المتحركة رمز القائمة بواسطة mariusbalaj

فكرة بسيطة وضعت موضع التنفيذ ؛ مشاهدة زر القائمة يتحقق عند التمرير لأسفل.

آخر CSS Preloader بواسطة Maseone

رهيبة تحميل CSS الإيقاعي. منوم ، أليس كذلك?

إرسال زر بواسطة auginator

انقر للإرسال ، ويقوم الزر بتنشيط عملية التحميل حتى يكتمل الإرسال!

مرونة SVG الشريط الجانبي تصميم المواد من قبل السويس

اسحب الشريط الأبيض إلى اليمين لرؤية تأثير الشريط الجانبي المرن.

زر الجسيمات بواسطة igcorreia

افعل ما يقوله الزر: مرر للذهول.

زر Gooey بواسطة Lucas Bebber

انقر للحصول على تأثير Gooey. ستحصل عليه بمجرد رؤيته ، وسوف تنقر فوقه عدة مرات. Amirite?

زر الجانب الآخر بواسطة hakimel

انقر على أي جانب من الزر "حذف" وسيقلب الزر وفقًا للمكان الذي تنقر فوقه.

قائمة همبرغر الحقيقية! تشارلز سمارت

قائمة همبرغر لذيذة حقًا. انقر همبرغر للحصول على آثار

Cruisin 'بواسطة YY

انظر دراجة نارية تذهب.

3D مكعب موجة بواسطة waddington

مكعبات ثلاثية الأبعاد المقدسة!

توقيع الرسوم المتحركة بواسطة drygiel

إليك توقيعًا لا يمثل رسمًا متحركًا لـ GIF ، ولكنه بدلاً من ذلك عبارة عن تسلسل PNG متحرك باستخدام CSS3.

الرسوم المتحركة الخلفية التدرج بواسطة quasimondo

تعمل هذه الخدعة على تغيير تدرج الخلفية من لون إلى آخر بشكل سلس ومستمر.

حرب النجوم toggle icon بواسطة rss

تتحول قائمة الهمبرغر إلى قنابل منارة في المعركة (صليب).

GIF Style الرسوم المتحركة بواسطة jascha

مشاهدة صورة تتحقق من وسط الفن بكسل.

التركيز في / خارج الرسوم المتحركة المدخلات بواسطة Fluxus

يكتب القليل من الرسوم المتحركة بالرسوم المتحركة فوق الشوكة التي تملأها.

لوني مثلث بواسطة felipedefarias

خداع بصري رائع ، نعم ، تم باستخدام CSS3.

صانع القهوة

إليك تذكير بتناول جرعة يومية من القهوة. مثلك تحتاج واحد.

كروم ديناصور بواسطة nickspiel

لا يمكنك الوصول إلى الصفحة التي تريدها بسبب انخفاض الاتصال؟ إليك الديناصور الذي تراه دائمًا عندما يحدث ذلك ، فقط هذه المرة يتم تشغيله من نيزك!

CSS يهز بواسطة elrumordelaluz

قم بالمرور فوق كل تأثير لمشاهدة الرجل الصغير يهتز.

Newton's Cradle Loader by All Things Smitty

إذا كنت تعرف الفيزياء ، فمن المؤكد أنك تعرف مهد نيوتن ، ولكن ربما لا تحب هذا.

إطلاق Modal بواسطة koolhaus

انقر لرؤية الرسوم المتحركة نافذة مشرقة لطيفة وسلسة.

المشي روبوت بواسطة P233

يحتفظ هذا الروبوت بالمشي والمشي والمشي حول المحور ص.

الثناء ترقيم الصفحات السهام بواسطة حكيم

من الصفحة الأولى إلى الأخيرة ، تُظهر رسوم ترقيم الصفحات هذه بوضوح كيف إذا كنت مسافرًا أم لا.

اقرأ الآن: 15 تأثيرات نصية جميلة تم إنشاؤها باستخدام CSS