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

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

إخبارنا عن أفكارك؟ إذا وجدت أي الدروس الأخرى التي ترغب في المشاركة معنا ، لا تتردد في إخبارنا عن طريق إسقاط في التعليق.

على سبيل المثال :

الخطوة # 1 المغلق هيكل

علينا أولا إنشاء البسيط المغلق مدونة

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (حشوة : 0 ؛ الهامش : 0 ؛) (هيئة الخط : 100 ٪ ارييل العادي ، هلفتيكا ، بلا - الرقيق ؛) 
 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (العرض : 280px ؛ الطول : 150px ؛ خلفية الصورة : رابط (الأرض (jpg.) ؛ خلفية موقف : أعلى ؛ - ماعوز للحدود دائرة نصف قطرها : 10px ؛ - بكت الحدود دائرة نصف قطرها : 10px ؛ الحدود : 10px الصلبة # مجلس التعاون الجمركي ؛ الخط : 13px ارييل العادي ، هلفتيكا ، بلا - الرقيق ؛ خط الطول : 18px ؛ تعويم : غادر ؛ الهامش : 0 10px 10px 0 ؛) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img أ (اللون : # الاتحاد الفرنسي ؛ العرض : 280px ؛ الطول : 150px ؛ العرض : كتلة ؛ النص الديكور : لا شيء ؛) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img : تحوم (خلفية : # 000 ؛ تعتيم : 60 ؛ فلتر : ألفا (عتامة = 60) ؛) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img فترة زمنية (العرض : لا شيء ؛ العرض : 280px ؛ الحشو : 5px ؛) 
  span { display : block ; } . rollover_img تمتد تحوم على : (يعرض : الكتلة ؛) 

الخطوة # 2 الاكواد هيكل

نحن الآن إنشاء بسيط الكود

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. الطبقة <div "rollover_img"=> عنوان <a="Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span>أبجد هوز دولور الجلوس امات ، consectetur إيليت إيليت.  condimentum سد.  في volutpat.  Vestibulum إيليت.  Aenean eget enim السيرة bibendum tellus pellentesque.  حوار في مثال تقديرات النص ، أبجد هوز دولور الجلوس امات ، consectetur إيليت إيليت. </ تمتد> </ أ> </ div> 

عرض تجريبي

متابعة منا على التغريد ، أو الاشتراك في الجنة مطوري + آر إس إس لأفضل البرامج التعليمية وتطوير الشبكة على الشبكة.

يودع تحت : المغلق ، برامج تعليمية من قبل المشرف