All Articles Web
على بعض المتعة مع CSS3 انتقالات
Toby Pitman on Mon, July 25th | 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

يبدو أن المتصفح الباعة يدفعون حقا جديدة 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 الأمثلة هنا.

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



Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: