X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

الوصول الحر بريميوم

وصول إلى مكتبة والمواد برمتها محور بريميوم ، ملفات المشاريع ، وأول 10 ٪ من كل فيديو تعليمي من دروس المكتبة على الانترنت .

إنشاء حسابك المجاني الآن!

على بعض المتعة مع CSS3 انتقالات
ترجم من قبل مترجم جوجل

يبدو أن المتصفح الباعة يدفعون حقا جديدة CSS3 الميزات من خلال بوتيرة سريعة جدا على الرغم من CSS2.1 فقط بعد أن تم للتو

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


الخطوة 1

لدي بعض العلامات بسيطة جدا هنا. غير مرتبة مجرد قائمة مع بعض الروابط فيها :


إيف وضع علامات الارتباط داخل بعض العلامات تمتد بحتة من أجل التوافق الوراء. لا أعرف لها الدلالات بدقة ولكن اذا كنت ترغب في العمل في هذا IE6 (تهز قبضة!) هذه هي الطريقة التي يوول الحاجة الى وضع علامة عليه على النحو IE6 (تهز قبضة!) لن يفهموا : تحوم على أي شيء آخر من الارتباط العلامات. لIE7 فسوف تحتاج إلى التأكد من أن يعلن عن DOCTYPE : التحويم للعمل على عدم ربط العناصر. مثير للشفقة ، وأنا أعلم!

إيف تطبيق بعض التصميم البسيط لجعل شريط التنقل الأفقي.


هذه هي النتيجة :


تطبيق إيف العرض : مضمنة ؛ إلى قائمة العلامات للحيلولة دون تخطيط بعض القضايا في IE6 (تهز قبضة!).


الخطوة 2

الآن يذهب ايم لتطبيق صورة خلفية لتصل به بلدي :


هذه هي النتيجة :


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

الخلفية : ؛


الخطوة 3

ويمكن الآن أنا نمط علامات تمتد.


هذه هي النتيجة.


فأنت تلاحظ أن الصورة الآن مخفيا العلامات رابط 'الخلفية لون الخلفية من العلامة التي تمتد يجلس على أعلى من ذلك. سمة تمتد أيضا أصغر 20px في الارتفاع من علامة الارتباط. هذا هو المهم!


الخطوة 4

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


هذه هي النتيجة.


عند هذه النقطة كنت أساسا في وضع الاحتياطي. ينبغي أن العلامات الحالية العمل في كل متصفح معروفة. وأود أن أضيف أي رمز من الآن فصاعدا CSS3 والدعم سوف تختلف من متصفح لمتصفح.


الخطوة 5

الآن إضافة إساءة حكم بلدي CSS3 الانتقال إلى علامات الارتباط.


هيريس كيف يعمل.

المرحلة الانتقالية :

الكل (تنطبق على جميع خصائص هذا العنصر CSS)

0.3 ثانية (الوقت للانتقال)

الخطي (منحنى توقيت تمر بمرحلة انتقالية)


والآن أي تغيير في خصائص العلامات الارتباط (على تحوم) الانتقال بسلاسة إلى القيمة الجديدة. وهو موقف الخلفية ولون النص.

فأنت تلاحظ أيضا أن هناك الكثير من البادئات بائع قليلة للانتقالات CSS. كل متصفح تطبق حاليا هذا التأثير في طرق مختلفة لذلك نحن بحاجة لاستهداف أكبر عدد ممكن.


- moz - = موزيلا فايرفوكس

بكت - - = سفاري ، والكروم

- O - = أوبرا


حالما يتم الانتهاء من هذا أنه سيصبح الانتقال ببساطة.


الخطوة 6

أخيرا إضافة إساءة بعض الزوايا السريعة مدورة.


هذه هي النتيجة :


التوافق

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


استنتاج

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


تحميل خاصة CSS3 الأمثلة هنا.

ومسرحية حول بعض المرح



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link