38 Inspiring CSS3 Animation Demos
منذ تقديم CSS3 ، هناك الكثير من النقاشات الساخنة التي تدور حول إمكانياتها وسهولة الاستخدام. ومع ذلك ، هناك أيضًا الكثير من التجارب المثيرة التي تم إنشاؤها يدويًا لاستكشاف إمكاناتها. على الرغم من أن التجارب بأي حال من الأحوال لا تثبت قابلية استخدام CSS3 ، إلا أنها أظهرت بالفعل الإمكانات الحقيقية لـ CSS3 ، لدرجة أن المطورين الكبار يعتقدون أن CSS3 هو المستقبل.
هل هذا صحيح؟ الحكم عليه بعيونك. في هذا العرض ، لن نعرض شيئًا غير ذلك 38 عروض رسوم متحركة مستوحاة من CSS3 التي تكتشف بحتة الإمكانات الحقيقية لل CSS3. إلى جانب التجارب الخالصة ، سترى أيضًا بعض الأمثلة العملية لكيفية تطبيق CSS3 في تصميم الويب لجعله أكثر حلاوة وجنسًا.
قال بما فيه الكفاية ، دعونا استكشاف العالم الرائع من CSS3!
قد تكون أيضا مهتما ب:
- دليل المبتدئين إلى CSS3
- إنشاء مربع بحث هزاز CSS3
- بناء صفحات الويب HTML5 / CSS3
- رشيقة التصفح التنقل القائمة في CSS3
- قم بإنشاء نموذج اتصال HTML5 / CSS3 يستند إلى Ajax
- 35 الرسومات بنيت بحتة مع CSS3
- أكثر من…
يوصى بشدة بمشاهدة هذه العروض التوضيحية باستخدام أحدث إصدار من Safari أو إصدار Developer من Google Chrome. تدعم معظم العروض أحدث إصدار من Firefox و Google Chrome.
الرسوم المتحركة 3D اللولب
أول واحد في القائمة هو رسم متحرك لا يصدق صممه Marcofolio.net ، باستخدام تحويلات CSS3 3D. تبدو الرسوم المتحركة كالسحر نفسه ، ولكن يمكنك تعلم إنشاء تأثير مماثل باستخدام البرنامج التعليمي في المقالة!
أزرار متحركة
أمر لا غنى عنه بالنسبة إلى مصمم الويب ، حيث لا يعرض العرض التوضيحي إمكانيات الرسوم المتحركة CSS3 فحسب ، بل يوفر أيضًا تأثيرات زر رائعة وعملية للغاية للإلهام!
قوائم الرسوم المتحركة
هل تحاول إضفاء الحيوية على قوائم الرسوم المتحركة الخاصة بك لجعلها تبدو رائعة وخلاقة حقًا؟ هذا العرض هو لك.
AT-AT ووكر
عرض توضيحي ملهم للرسوم المتحركة يوضح إمكانات CSS3 على تنشيط وحدة بأجزاء الجسم.
ساحة المعركة CSS3
ساحة المعركة CSS3 مع الكثير من الانفجارات والطلقات النارية!
صفقة كبيرة
انها الرسوم المتحركة على نحو سلس ولطيف الذي جعل هذا التجريبي صفقة كبيرة.
يمكن أن هاز اور المؤشر?
“مرحبا ، أنا المؤشر الوحش. لدي بابا رسالة لك: "من فضلك ، لا تستخدم المؤشر: لا شيء, إلا إذا قمت بإنشاء مؤشر أكل الوحش ".”
قفص الاتهام المغلق
تجربة مثيرة تحاكي رصيف Mac OS X ، وهي سلسة حقًا.
CSS3 مان
انتبه ، هنا يأتي رجل CSS3! مثال مثالي لعرض الإمكانات الحقيقية للرسوم المتحركة CSS3.
الكرة سال لعابه
مع الاستخدام القليل من الحيل الرسومية ، تظهر رسوم متحركة CSS3 لطيفة ومسلية.
Dulla
يُظهر Dulla إلى حد كبير أحد الأساليب الأكثر شيوعًا المستخدمة لإنشاء لعبة منصة ثنائية الأبعاد ، والتي أصبحت ممكنة أيضًا مع CSS3.
الإطار بواسطة الإطار الرسوم المتحركة
الإطار حسب الإطار الرسوم المتحركة مع CSS3؟ ليس هناك أى مشكلة!
الرسم البياني للرسوم المتحركة
رسوم متحركة بسيطة ولكنها قوية بالنسبة لك لعرض / شرح الرسم البياني في موقعك ، وتعلم كيفية جعله!
متوسط
رسوم متحركة موسيقية غامضة تعرض صورًا من بحث Google ديناميكيًا في الوقت الفعلي ، وتعتمد الصور المعروضة على كلمات الأغاني.
تحوم الآثار
مستقبل تأثير التحويم يأتي مع CSS3. أنيق واعد.
أنا جوزيف باريت
تم دمج CSS3 في أيقونات الوسائط الاجتماعية لموقع الحافظة. إنه ليس ممتعًا فحسب ، بل يظهر أيضًا إبداع المصمم.
تكبير لانهائي
رسوم متحركة سلسة ، وهي أيضًا طريقة رائعة لاظهار محفظتك. التكبير الكلي للصور 26 هو 67108864: 1.
Kinect و CSS3
“يتم تعقب 14 مفاصل الجسم وتحويلها إلى رسم CSS قصير باستخدام Xbox Kinect. يتم إحضار بيانات النص الأساسي إلى المتصفح حيث يتم تحليلها وتحويلها إلى رسوم متحركة لـ CSS باستخدام animatable.com.”
مصفوفة
تريد أن تكون باردة مثل ماتريكس؟ باستخدام CSS3 ، ستتمكن من تحقيق ذلك.
تحوير مكعبات
عرض تجريبي لاستكشاف CSS3 باستخدام التحويلات ثلاثية الأبعاد والرسوم المتحركة والانتقالات. الجزء المثير للاهتمام هنا هو أنه لا يزال بإمكانك تحديد النص على العناصر ، حتى عندما لا تزال تدور.
نظامنا الشمسي
لا تحتاج إلى برنامج مستقل مكلف لمساعدة الطلاب على استكشاف النظام الشمسي بعد الآن.
داف رول
“Mmmmmm .... أحب هومر العرض الذي لا ينتهي من البيرة.”
دائرة الملصقات
مثال بسيط ولكنه مثير للاهتمام يوضح لك كيفية استخدام تحويل CSS والرسوم المتحركة لتحقيق تأثير مثير للاهتمام.
القس خطر
من يمكنه مقاومة موقع ويب به شخصيات لطيفة حقًا ورسوم متحركة مسلية?
Rofox
رسوم متحركة سلسة وممتعة ، احصل على الكود المصدري لتجربته بنفسك!
شون الخراف
“شاهد مقاطع شون وأصدقائه الغريبة في مقاطع من "An Ill Wind" و "Snowed In" و "The Big Chase" و "Twos Company" من خلال تجربة تفاعلية تم إنشاؤها باستخدام فيديو HTML5 المعجل بالأجهزة ، وتحولات CSS ثلاثية الأبعاد ، و WebM.”
الفراغ
ربما الفضاء هو الحد النهائي ل CSS3.
الفضاء CaCSS
اصنع تأثيرًا سحريًا مثل هذا ليس بالأمر الصعب مع CSS3 ، حيث يوجد بشكل أساسي فقط مكرر شعاعي الانحدار و خلفية الحجم متورط. الاختلافات ممكنة مع مقدار معقول من القرص.
حرب النجوم الزحف
حرب النجوم فتح تأثير الزحف! تماما مثل ملحمة CSS3.
الشبكة التعبيرية
لا تقدم لك الويب التعبيرية فقط CSS3 ودعم المستعرض والمراجع والوثائق الخاصة به ، ولكنها تعرض أيضًا رسومًا متحركة CSS3 مثيرة للذهن على صفحة الويب الخاصة بها.
رسالة رؤساء
استخدام الأنواع لإنشاء ظل يشبه وجه الإنسان ، الذي كان يعتقد أنه سيكون ممكنًا مع CSS3?
الرجل من هوليوود
هل شاهدت تلك الرسوم المتحركة الجذابة باستخدام الطباعة الخالصة؟ حسنًا ، يمكنك القيام بذلك باستخدام CSS3 أيضًا.
القبة السماوية
ببساطة تجريبي ملحمي على استكشاف القبة السماوية مع التفاصيل. يتم تضمين SVG و JavaScript و HTML5 و CSS3 والخطوط والأنواع.
اكتب الامطار
“التوقعات لهذا اليوم ، على افتراض أنك تستخدم متصفحًا حديثًا ، غائمًا ، مع فرصة للاستحمام في جورجيا بنسبة 100٪.”
آثار الطباعة
إلى جانب تأثيرات الزر والقائمة والتحويم ، يمكنك أيضًا تحقيق تأثيرات الطباعة الإبداعية باستخدام CSS3. تشارك jQuery أيضًا في هذا العرض التوضيحي لتصميم حروف الكلمات.
المشي مع أندرو هوير
أفضل للجميع ، يمكنك أيضًا تعلم المشي مع أندرو هوير في المقالة!
عجب Webkit
استخدام رائع للتحولات ثلاثية الأبعاد CSS3 مع مكتبة JavaScript Matrix. يبدو التقنية ، ولكن النتيجة بارد هزاز.
زوتروب
ما الذي لا يمكنك فعله أيضًا مع CSS3 عندما يكون Zoetrope ممكنًا?
انعكاس
الملهمة؟ نعم فعلا. عملي؟ ربما. تعتبر تقنية الرسوم المتحركة دائمًا موضوعًا مخدوشًا للمطورين والرسامين حيث إنها تتطلب مستوى معينًا من المعرفة لإنتاج رسوم متحركة سلسة وفريدة من نوعها وأنيقة. في حين أن CSS3 لديها القدرة على القيام بالرسوم المتحركة ، فإن هذا لا يعني أنها أداة مناسبة للرسوم المتحركة. أعتقد في النهاية أنه لا يزال يتعلق بتفضيلاتك ، بالنسبة لي ، أنا بخير مع كليهما ، طالما أن الأداة تناسب احتياجات المشروع.
ما رأيك في هذه الرسوم المتحركة CSS3؟ هل هذه الرسوم المتحركة لـ CSS3 جيدة كتجارب فقط ، أم يمكن تطبيقها أيضًا على تصميم مواقع الويب الواقعية؟ كالعادة ، نرحب بفكرك الثمين حول هذا الموضوع ، وعلينا أن نعرف كذلك قطعة الرسوم المتحركة CSS3 المفضلة لديك أيضًا!
أكثر من
مجرد عرض ، حقا؟ أنت تستحق أن تحصل على المزيد! فيما يلي البرامج التعليمية وأدلة CSS3 من Hongkiat إليك ، استمتع بوقتك في استكشافها!
