اضافة تأثير التحرك للخلفيات - css animation linear-gradient

عبدو تكنولوجي - Abdou Technologie
4 مارس 2019
اضافة تأثير التحرك للخلفيات - css animation linear-gradient

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

 شرح اليوم على كيفية اضافة تأثير التحرك المستمر للخلفيات المتدرجة 

اولا يمكنك معاينة هذا القالب الذي عليه خلفيات متدرجة من هنا

  • شرح تركيب الاضافة على القالب 
  1. اولا ابحث في القالب على </b:skin> وضع الكود التالي فوقه مباشرة 

@-webkit-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}





الان بعد وضع الكود الاول و هوا عبارة عن keyframes الخاصة بتأثير

الان لاضافة تأثير على شئ يجب اولا تحديد ال class  او id  الخاص به 

على سبيل المثال نقول انا لدينا class قيمته abdoutech  نريد جعل خلفيته عليها التأثير


نحدد كتالي



.abdoutech {
/* بداية كلاص */
/* http://bit.ly/linear-gradient  هذا كود الخلفية يمكنك تغييره عبر هذا الرابط */
background: linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);
/* http://bit.ly/linear-gradient هذا كود الخلفية يمكنك تغييره عبر هذا الرابط */
background-size: 1400% 1400%;
-webkit-animation: AnimationName 12s ease infinite;
-moz-animation: AnimationName 12s ease infinite;
animation: AnimationName 12s ease infinite;
/* نهاية كلاص */
}




الكود الذي ب الاخضر يمثل الخلفية يمكنك تغيير لون الخلفية عبر الموقع المبين مع الكود ب الاحمر


الى هنا نكون قد وصلنا الى نهاية الشرح انشالله يكون قد اعجبكم لا تنسو الاشتراك في المدونة لكي تتوصلو بكل جديد
تعليقات
  • برمجة وتصميم 4 مارس 2019 في 2:19 م

    شكراً أخي عبدو على تلبية طلبي ولكن لو توضح لنا الإضافة بالشرح

  • برمجة وتصميم 4 مارس 2019 في 2:33 م

    أريد شرح اضافة خاصية hover box shadow لقوالب بلوجر

    • عبدو تكنولوجي - Abdou Technologie 5 مارس 2019 في 8:34 ص

      يوجد اشياء لا يمكن شرحها او تخصيص لها تدوينة لانها بسيطة لذا تفضل على صفحة اتصل بنا سوف اعطيك اكواد

  • برمجة وتصميم 5 مارس 2019 في 12:03 م

    شكرآ أخي عبدو

  • جيك برو | Geek Pro 6 مارس 2019 في 1:51 ص

    (k) مبدع العرب (k)

  • maher 21 أبريل 2019 في 1:08 م

    اشكرك اخي عبد على الاضافة الرائعة و شكرا اكبر على المساعدة في تركيبها

  • آيهم العراقي 15 مايو 2019 في 11:16 ص

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

  • آيهم العراقي 15 مايو 2019 في 2:17 م

    ربي يجازيك الجنة قول امين

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع