آخر الأخبار
جاري التحميل ...
الرئيسية / Animation
‏إظهار الرسائل ذات التسميات Animation. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات Animation. إظهار كافة الرسائل
Admin Amer لا يوجد تعليق

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

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

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

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

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

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

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




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


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

شرح التأثيرات الحركية CSS Animation كتبها: المدون التقني - الخبير عامر بشير

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

اليوم اقدم لكم شرح كامل لأضافة تأثيرات ال css في قوالب بلوجر بعد ما طلبني عليه الكثير من المتابعين لذالك قررت وضع فيديو يشرح فيه الطريقة كاملة 

مشاهدة ممتعة




لتطبيق التأثير نضيف
هذا 

    animation: pulse .8s linear infinite;

  1. pulse=هنا تكتب اسم اي حركة اعجبتك
  2. 8s=هنا مدة التأثير
  3. linear infinite=هنا كم من مرة تعاد الحركة 



لتحميل الكود الاول من هنا
هذا الكود للحصول على اسماء الحركات من هنا  و الموقع لمشاهدة التأثيرات من هنا


و هنا اضافة تموجات 
-webkit-animation: sonarWarning 1.8s linear infinite;
    -moz-animation: sonarWarning 1.8s linear infinite;
    animation: sonarWarning 1.8s linear infinite;