اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني

اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

السلام عليكم ومرحبا بكم في مدونة الخبير عامر بشير

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

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

شرح تركيب الاضافة على القالب

اولا ابحث في القالب على وضع الكود التالي فوقه مباشرة

محرر@-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;
/* نهاية كلاص */
}

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

الى هنا نكون قد وصلنا الى نهاية الشرح انشالله يكون قد اعجبكم لا تنسو الاشتراك في المدونة لكي تتوصلو بكل جديد

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2019/03/css-animation-linear-gradient.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2019/03/css-animation-linear-gradient.html">اضافة تأثير التحرك للخلفيات - css animation linear-gradient كتبها: المدون التقني  - الخبير عامر بشير</a>

الموضوع من قسم:

اضافات بلوجر بلوجر Animation CSS

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

عن المدونة

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